1

マウスオーバーでdivの不透明度を下げ、マウスアウトで100％に戻し、クリックするとdivを数百ピクセル下に移動する単純なJQueryアニメーションがあります。シンプルですよね？

問題: ユーザーがクリックして 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です

ありがとう！

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 に答える