jQuery添加的easing会打断后面的动画.语法错误

jQuery adding easing breaks animations that come after. Syntax Error?

本文关键字：动画 语法 错误 添加 easing jQuery      更新时间：2023-09-26

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

基本动画序列是页面的下半部分淡入并向上飞行以满足上半部分。然后三个按钮淡出并依次飞到指定位置。看起来还行，但是如果配上easOutBounce，效果会更好。

我现在已经纠结这个问题太久了，试图弄清楚为什么添加easing会破坏我的代码。我猜我的语法不正确。

此代码适用于所有元素:

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中工作，在无冲突模式下运行

试试这个语法:.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/

相关文章：