jQuery中的.animate()回调可以有阶梯函数和普通函数吗？

Posted 2023-05-08

【中文标题】jQuery中的.animate()回调可以有阶梯函数和普通函数吗？

【英文标题】：Can there be a step function and a normal function for the .animate() callback in jQuery?

【发布时间】：2011-09-22 17:32:40

【问题描述】：

我正在尝试使用 step: 函数让我的“选项卡”div 和“选项”div 同时滑出（即同步两个 div 的动画），但我还需要一个常规的动画的函数。

是否可以将这两种类型的函数都作为 .animate() 的回调函数？

编辑：

Test page

在上面的测试页面上，我想在点击左上角的“文本选项卡”时让另一个 div 滑出，但是根据 jQuery .animate() 文档，使用了 step: 函数同步不同元素的动画，我这里是我的JS：

$( "#optsdiv" ).hide();
$( "#closediv" ).hide();
$( "#opendiv" ).click( function() 
  $( "#opendiv" ).animate(  left: "+=100px", opacity: 1 , 1400, "easeOutExpo", function() 
     $( "#opendiv" ).hide();
     $( "#opendiv" ).animate(  left: "-=100px", opacity: 0.6 , 0 );
     $( "#closediv" ).show();
    );
);

$( "#closediv" ).click( function() 
  $( "#closediv" ).animate(  left: "-=100px", opacity: 0.6 , 1400, "easeOutExpo", function() 
    $( "#opendiv" ).show();
    $( "#closediv" ).hide();
    $( "#closediv" ).animate(  left: "+=100px", opacity: 1 , 0 );
   );
);

如您所见，我使用“普通”函数（非步骤：函数）来完成动画...所以我想知道在实现step：在同一个回调函数中同步滑出tab和其他div。

【参考方案1】：

如果通过“常规函数”，你的意思是在动画结束时回调，那么是的，只需使用第二个选项设置动画的所有属性论据：

$('.someElement').animate(width:100,  duration:1000,
                                         step: function(),
                                         complete: function() );

示例： http://jsfiddle.net/n2pZp/1/

【讨论】：

但是我可以有一个步骤：函数和回调的“常规”函数同时吗？

@Aaron：要么我不知道你所说的“常规”函数是什么意思，要么我不知道你所说的“同时”是什么意思。你是说你想让step: 函数调用另一个函数吗？

@Aaron：听起来您只是在说您需要一个函数作为步骤回调运行，而在动画完成后运行另一个函数。但这就是我的回答，所以我显然仍然不理解你。请使用一些代码更新您的问题（甚至是一个简单的示例来说明您想要什么），或者像我在回答中所做的那样创建一个 jsFiddle。

@Aaron：使用您当前的 html，您似乎不需要 step 回调来协调两者。只需在#optsdiv 上制作一个单独的（并行）动画，该动画同时开始，并且与#opendiv 动画具有相同的持续时间。更好的是，更改您的 HTML 和 CSS，以便将两者都放在一个容器中。然后你可以只为容器设置动画，两者都会随之移动。

@Aaron：你并不孤单！很高兴我能帮助你。 :o)