How To jQuery Animate Tutorial

Below are the 3 ways I found to animate using jQuery. I also did not want to use display:none; in my CSS for SEO reasons. This is what I used...

1 - Delay - Fadein - display none CSS - Demo

// Basic reveal img in 2 seconds using display none CSS
$(document).ready(function() {
$("#angry-bird").delay(2000).fadeIn(1000);
});

2 - Delay - Fadein - NO display none CSS - Demo

// fadeIn img in 2 seconds without display none in CSS
$(document).ready(function() {
$("#angry-bird").delay(2000).css( "left","100px").hide().fadeIn(1000);
});

3 - Delay - Animate & Fadein - NO display none CSS - Demo

// Animate and fadeIn img in 2 seconds without display none in CSS
$(document).ready(function() {
$("#angry-bird").delay(2000).animate({left: '-=800', top: '+=366', opacity: '1'}, 1000);
});

ADVERTISE HERE