JQuery動畫通過鼠標取消

Question

我有一個簡單的JQuery動畫，可以減少鼠標懸停時div的不透明度，在鼠標懸停時減少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 & fadeOut ：http://api.jquery.com/fadein/