CODEWITHSUNDEEP
javascriptjqueryjquery-waypoints
Greg
Greg

Reputation: 3063

Fadein DIVs one by one with jquery and waypoints plugin

Using waypoints plugin and jquery I'd like to display 3 DIVs (.circle-1, .circle-2, .circle-3) one after each other with a delay. Trigger point would be once .wrapcircles is in viewport (visible part of browser). Unfortunately that does not work. Not sure if this is a syntax error or something else... Thanks for your help

 <script type="text/javascript">
$(function() {
       $('.wrapcircles').waypoint(function() {
         $(".circle-1").fadeIn('slow').delay(500);
         $(".circle-2").fadeIn('slow').delay(4000);
         $(".circle-3").fadeIn('slow').delay(8000);
         }, {
           offset: '100%'
         });
    });
</script>

Upvotes: 3

Views: 1087

Answers (1)

Ashis Kumar
Ashis Kumar

Reputation: 6554

You just need to apply the delay() before the fadeIn(). 

$(".circle-1").delay(500).fadeIn('slow');
$(".circle-2").delay(4000).fadeIn('slow');
$(".circle-3").delay(8000).fadeIn('slow');

Try this http://jsfiddle.net/k85rz/

Upvotes: 3

Related Questions