Question

我有一个简单的JQuery动画，可以在鼠标悬停时降低div的不透明度，在mouseout上降低到100％，并且在点击时将div移动几百个像素。很简单吧？

问题是：用户点击并开始移动div，但如果用户在动画时移动鼠标，则会检测到鼠标移除事件并取消动画。

<!--MOUSEOVER ANIMATION-->

$(".roll").hover(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
    opacity: ".7"
    }, 400 );
});

$(".roll").mouseout(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
    opacity: "1"
    }, 400 );
});

<!--BUTTON CLICK-->
$(".roll").click(function(){
    $(".roll").removeClass("roll");
    var rollid = $(this).attr('id');
    $(".tbox").stop().animate({
    top: "540"
    }, 400,function(){
        $("#p1").fadeIn();
    });
});

网页链接为http://www.megadyne.com/safezone/index2.php

谢谢！

Answer 1

悬停功能可以用于悬停和进出，如下所示：

$(".roll").hover(function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
        opacity: ".7"
    }, 400 );
}, function(){
    var rollid = $(this).attr('id');
    $("#h" + rollid).stop().animate({
        opacity: "1"
    }, 400 );
});

顺便说一下，您可能希望将.stop()更改为.stop(true, true)：http://api.jquery.com/stop/

还有动画fadeIn＆amp; fadeOut：http://api.jquery.com/fadein/

JQuery动画被mouseout取消了

1 个答案: