javascript - jQuery 添加缓动会破坏后面的动画。语法错误？

Question

我正在向网站添加动画，但添加缓动有点困难。我可以让整个动画序列正确运行，但是当我尝试定义缓动时，动画会在我定义缓动的第一个元素之后的所有动画上中断。

基本的动画序列是页面的下半部分淡入并向上飞到与上半部分相遇。然后三个按钮会淡入并依次飞到指定位置。看起来不错，但使用 easOutBounce 看起来会好很多。

我现在已经为此苦苦挣扎太久了，试图找出为什么添加缓动会破坏我的代码。我猜我的语法不正确。

此代码适用于所有元素:

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 } );
       } ); 
    } );  
});

但是这段代码没有。当我运行此代码时，它确实添加了缓动，并且仍然适用于 .front-page-content-wrap 和 #box-button-1，但是然后它就停止了。

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' } );
       } ); 
    } );  
});

有什么想法吗？

PS，我使用 jQuery 作为变量标识符而不是 $，因为我正在以无冲突模式运行的 wordpress 中工作。

Answer 1

尝试以下语法:.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/