Javascript jQuery添加后面的动画。语法错误?

Javascript jQuery添加后面的动画。语法错误?,javascript,jquery,animation,Javascript,Jquery,Animation,我正在给一个网站添加动画,在添加动画时有点困难。我可以让整个动画序列正确运行,但当我尝试定义缓和时,动画会在我定义缓和的第一个元素之后的所有动画上中断 基本动画序列是页面淡入的下半部分,然后向上飞到上半部分。然后三个按钮淡入并按顺序飞到指定位置。它看起来不错,但如果使用easOutBounce,效果会更好 我现在已经为此绞尽脑汁太久了,试图弄明白为什么添加宽松会破坏我的代码。我猜我的语法不正确 此代码适用于所有元素: jQuery( '.front-page-content-wrap' ).an

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

基本动画序列是页面淡入的下半部分,然后向上飞到上半部分。然后三个按钮淡入并按顺序飞到指定位置。它看起来不错,但如果使用
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 } );
       } ); 
    } );  
});
但是这个代码没有。当我运行此代码时,它确实添加了缓和,并且它仍然在
.FrontPage 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' } );
       } ); 
    } );  
});
有什么想法吗

另外,我使用jQuery作为变量标识符,而不是$,因为我在wordpress中工作,它在无冲突模式下运行。

尝试以下语法:


不过,这并没有增加宽松。当我使用该代码时,它默认为swing-easing,同时忽略“easeOutBounce”。不,我只是将jQuery和jQuery UI链接起来。没有插件。这个插件是必需的吗?试着在放松之前添加一个默认的持续时间(400毫秒)。这应该是没有必要的。我有,这违反了规则。我也尝试过使用几种不同的语法格式。我也尝试过将持续时间作为字符串和数字,因为文档中说它可以是。很好。你能在同一个网站上复制你的问题吗?
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' } );
       }}); 
    }});  
});