Question

用户通过mouseenter启动动画。但当他鼠标进入其他元素开始下一个动画时，我想立即完成上一个。您可以在www.checkitout.over.cz/appio网站上看到动画。谢谢大家。

$(".col3-1 > div").mouseenter(function(){

        $(this).find("div").find("span").hide();
        $(this).find("div").find("div").hide();
        $(this).find("div").css("height", "1.5em");
        $(this).find("div").find("div").css("top", "0px");
        $(this).find("div").find("div").fadeIn();

            $(this).find("div").find("div").animate({
                "left": "78px"
            }, 200);

    });


    $(".col3-1 > div").mouseleave(function(){

        $(this).find("div").find("span").show();
        $(this).find("div").css("height", "2.5em");
        $(this).find("div").find("div").css("top", "7px");
        $(this).find("div").find("div").css("left", "10px");

    });

Answer 1

您应该使用finish()方法：（jq 1.9 +）

$('.col3-1 > div:animated').finish();

对于较旧的jq版本，请使用stop(true, true)：

$('.col3-1 > div:animated').stop(true, true);

Answer 2

jquery stop()就是您所需要的。

stop()停止匹配元素上当前正在运行的动画。

你可以传递额外的参数来停止，

stop(true,true)

清除队列并立即完成当前动画设置为true

为什么你有两个find()。用空格分隔它们应该有效

$(this).find("div span")..

Answer 3

使用stop()方法

$(this).find("div").find("div").stop().animate({
            "left": "78px"
        }, 200);
  );

如何立即完成正在进行的动画？

3 个答案: