3

我试图触发一个动画作为对另一个动画的回调。事情是我只希望第二个动画在第一个动画完成时触发，从我读到的内容来看，这就是 .stop() 函数应该如何工作的。然而，在我编译的代码中，即使第一个动画没有完成，第二个动画也会触发。

这是代码：

$(document).ready(function(){
    var angle = 0;

    function arrowRotate() {
        angle +=180;
        $('#arrow img').stop().rotate({
            animateTo: angle,
        }, 100);
    };

    function ToggleOpen(heightValue) {
        $('#information').stop().animate({
            height : heightValue,
        }, 1500, 'easeOutExpo', function(){
            arrowRotate();
        })
    };

    $('#information_container').hover(function(){
        ToggleOpen(500);

    }, function(){
        ToggleOpen(0);
    });

    $('#arrow img').click(function(){
        ToggleOpen(0);
    });

});

我正在使用这个第三方插件：http ://code.google.com/p/jqueryrotate/

这是现场实施：http ://hopeand purpose.org

所以基本上我想要完成的是在悬停时提高 div 的高度，一旦完成，图像就会旋转。问题是即使高度动画没有完成并且 div 动画回到 0，图像仍然会旋转。

当我现在查看代码时，似乎我的问题可能是当它悬停时，它触发了 arrowRotate() 函数。包装 arrowRotate() 函数的 if 函数会是我最好的解决方案吗？

4

1 回答 1

3

用于stop(true)停止动画，并清除所有等待在元素上运行的排队动画。

这是一个例子。如果您在高度缩小之前将鼠标移开，您将看到该动画未运行，因为它已stop(true)在 mouseleave 处理程序中清除。

$("div").hover(function() {
    $(this).stop(true).animate({ width: 300 }, function() {
      $(this).animate({ height: 50 });
    });
  }, function() {
    $(this).stop(true).animate({ width: 50, height: 100 });
  }
);
#test {
  width: 50px;
  height: 100px;
  background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Test</div>

于 2012-04-30T12:37:57.060 回答