Question

看起来回调功能在调用 animate 之后立即执行，而不是在持续时间结束时执行动画设置为。看起来函数在其中执行或引用无关紧要。

有没有办法指定在持续时间结束时启动回调函数，或者我需要启动一个与动画持续时间设置为相同值的计时器？

另一件事，假设，我希望相同的功能可以根据css属性值设置淡入或淡出动画，唯一可以让整个想法顺利通过的事实是我无法调用相同的动画动画时，元素上的动画。有什么方法可以停止执行动画？

到目前为止，文档中没有任何内容，想知道是否有人有同样的问题以及你是如何解决它的。

提前谢谢。

Answer 1

很抱歉，您的看起来像语句是假的：只有在事件完成后才会执行回调。

来自回调参数的jQuery文档：

每当动画完成时执行的功能，对每个动画元素执行一次。

Source

在您的计算机上尝试以下代码。如果这不能说服你说文档是对的，那么我不知道会发生什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>jQuery Animate, Callback Test</title>
  </head>
  <body>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('<div id="mytest">Incoming!</div>')
          .appendTo(document.body)
          .css('font-size', '14px')
          .animate({ fontSize: '42px' }, 1500, 'linear', function() {
            $(this).text('Boom!').css('color', 'red');
          });
      });
    </script>
  </body>
</html>

文字会变得更大，然后说“繁荣！”并在动画完成时变为红色。

默认情况下，动画将继续运行，因为有队列。队列只是jQuery循环的待处理动画列表，直到它为空。要放弃队列，您需要使用animate的一个重载版本：

$(this).animate({
  opacity: 1.0,
  width: '234px'
}, {
  queue: false, // This skips the queue
  duration: 'fast',
  complete: function() { alert('the callback'); } // Your callback goes here...
});

此外，必须在没有括号（此片段的周围卷曲标记）的情况下传递命名函数，否则函数将被执行。

var temp = myFunc(); // gets called and the result is assigned...
var temp = myFunc;   // but this doesn't get called, and the function is passed.

jQuery：animate（params，[duration]，[easing]，[callback]）

1 个答案: