jQuery添加缓动会中断随后的动画。 语法错误？

Question

I'm adding animations to a website, and having a bit of a hard time adding easing. I can get the entire animation sequence to run correctly, but when I try to define the easing, the animations break on all the animations that come after the first element where I define easing.

The basic animation sequence is the bottom half the page fades in and flies up to meet the top half. Then three buttons fade in and fly up sequentially to their designated locations. It looks alright, but it would look a lot better with easOutBounce .

I have now been wrestling with this for too long, trying to figure out why adding the easing breaks my code. I'm guessing my syntax is incorrect.

THIS code works on all elements:

jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
    jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, function(){
       jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, function(){
         jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 } );
       } ); 
    } );  
});

BUT this code doesn't. When I run this code, it does add the easing and it still works on the .front-page-content-wrap , and the #box-button-1 , but then it stops.

jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
    jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
       jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' }, function(){
         jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
       } ); 
    } );  
});

Any ideas?

PS, I'm using jQuery as the variable identifier instead of $, because I'm working in wordpress which runs in no-conflict mode.

Answer 1

Try this syntax: .animate( properties, options )

jQuery( '.front-page-content-wrap' ).animate( {marginTop: 0, opacity: 1}, 600, function(){
    jQuery( "#box-button-1" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
       jQuery( "#box-button-2" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce', complete: function(){
         jQuery( "#box-button-3" ).animate( { bottom: 78, opacity: 1 }, { easing: 'easeOutBounce' } );
       }}); 
    }});  
});

http://jsfiddle.net/mblase75/42BjC/