1

我有一个简单的 JQuery 动画，可以在鼠标悬停时降低 div 的不透明度，在鼠标悬停时恢复到 100%，在单击时将 div 向下移动几百像素。够简单吧？

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

<!--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

谢谢！

4

1 回答 1

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& fadeOut：http ://api.jquery.com/fadein/

于 2012-05-31T17:23:52.153 回答