javascript - 停止循环并展开活动元素

Question

我有这个动画 http://jsfiddle.net/atcr4/7/

jQuery("#blue").delay( 1000 ).animate(
        {"height": "+=20px", "width": "+=45px"},
        "slow", function(){
            jQuery(this).css({
                "box-shadow":"1px 3px 3px #333",
                "position":"relative"})

        });

jQuery("#green").delay( 1000 ).animate(
        {"height": "+=20px", "width": "-=45px"},
        "slow", function(){
        });
jQuery("#orange").delay( 1000 ).animate(
        {"height": "-=20px", "width": "+=45px"},
        "slow", function(){
        });
jQuery("#pink").delay( 1000 ).animate(
        {"height": "-=20px", "width": "-=45px"},
        "slow", function(){
        });

当我悬停其中一个框以停止循环和悬停的框展开时，有什么办法吗？

先感谢您！

Answer 1

你可以使用 .stop 或 .finish ：

jQuery("#blue").hover(function() {
      $( this ).finish();
});

或者

 jQuery("#blue").hover(function() {
      $( this ).stop(true,true);
});

检查最适合您意图的 API 参考：

http://api.jquery.com/stop/

http://api.jquery.com/finish/