jQuery fadeIn（）和fadeOut（）毫不延遲

Question

早上好，

我想在我的網站上插入一個jQuery fadeIn()和fadeOut() 。 從理論上講，我擁有的代碼可以工作，但是有些我不喜歡的東西。 通過將鼠標移到imagemap的映射區域fadeIn()觸發fadeIn() 。 隱藏的div逐漸淡入，覆蓋圖像映射。 離開映射區域時，疊加div會淡出。

發生的事情是，僅當鼠標停留在映射區域上方時，才會開始顯示de fadeIn() ，而不是將鼠標懸停在該區域上。 因此，為了觸發效果，鼠標需要進入映射區域並完成休息。

我要的是， fadeIn()鼠標停留在映射區域多長時間，de fadeIn()在鼠標進入映射區域后立即啟動。

這是我的代碼摘錄

//JAVASCRIPT
//PRELOAD THE SOURCEIMAGE
original = new Image(655, 338);
original.src = "imagenes_png/bosque_mapa.png";


//PRELOAD THE IMAGES FOR MOUSEOVER
azulH = new Image(655, 338)
azulH.src = "imagenes_png/azul_mouse_h.png";

verdeH = new Image(655, 338)
verdeH.src = "imagenes_png/verde_mouse_h.png";


//LOAD THE DOM BEFORE JS FILLS IT WITH IMG (HIGHLIGHT)
$(document).ready(function() { 
document.getElementById("verdeH").appendChild(verdeH);
document.getElementById("azulH").appendChild(azulH);
});


//JQUERY
//jQUERY FADEIN
$(document).ready(function() {
$(function() {
    $("#verdeA").mouseenter(function() {
       $("#verdeH").stop().fadeIn("fast");
    });
    $("#verdeA").mouseleave(function() {
       $("#verdeH").stop().fadeOut("fast");
    });
   $("#azulA").mouseenter(function() {
    $("#azulH").stop().fadeIn("fast");
   });
   $("#azulA").mouseleave(function() {
       $("#azulH").stop().fadeOut("fast");
   });
});  
});

任何想法如何做到這一點？ 如果需要HTML代碼，我可以提供！

而這里的HTML

<!-- LOAD OVER(!) THE IMAGEMAP WITH DIV FOR POSITIONING-->
<div style="position:relative" width="655" height="338">

<!-- HIDDEN PRELOADED IMAGES FOR HIGHLIGHT--> 
<div id="azulH" style="display:none; position:absolute" width="655" height="338"></div>
<div id="verdeH" style="display:none; position:absolute" width="655" height="338"></div>


<!-- INSERT THE PICTURE -->
<img name="bosque" id="bosque" src="imagenes_png/bosque_mapa.png" width="655" height="338" border="0" usemap="#bosque_m" alt="Bosque con animales" />

<!-- CREATE THE MAP -->
<map name="bosque_m" id="bosque_m">

     <area shape="poly" coords="605,304,608,301,613,300,617,302,618,308,617,313,618,315,620,317,624,318,628,318,631,318,634,320,635,326,634,331,629,334,626,337,625,339,602,338,602,334,604,330,608,326,609,320,608,315,606,311,604,308,605,304"    
     id="verdeA" alt="¡Un animal ocultado!" />

     <area shape="poly" coords="442,233,447,233,451,235,454,238,456,242,457,246,463,247,468,249,472,251,474,254,470,255,465,253,460,252,456,252,454,253,450,253,445,251,441,247,439,244,439,239,442,233" 
     id="azulA" alt="¡Un animal ocultado!" />

 </map>

 </div>

擺弄東西http://jsfiddle.net/n96070kd/

Answer 1

您應該查看jQuery的mouseover()函數。 僅當用戶將鼠標懸停在某個區域上時，此選項才會生效。 只要用戶將鼠標懸停在某個區域上，它就會運行，無論光標速度如何。

$(document).on('mouseover', '#azulA, #verdeA', function(){
    console.log('I am hovering');
    $('#hover-status').css('background-color', 'green');
}).on('mouseout', function(){
    console.log('I am no longer hovering');
    $('#hover-status').css('background-color', 'red');
});

您的多邊形區域很小也無濟於事，但我仍然設法使它起作用。 我確定您知道該區域的位置（右下），因為它是您的對象。

參見此小提琴示例 。當您將鼠標懸停在某個區域時，該框將變為綠色，而當您將鼠標懸停在某個區域時，該框將變為紅色。

編輯：

因為我相信您正在尋找解決閃爍問題的方法，所以請看一下這段代碼，這將有助於解決此問題。 您可以根據需要進行調整：

$('#azulA').hover(function(){
    $('#azulH').animate({opacity: 1}, 1000);
    $('#bosque').css('opacity', '0');
    $('#hover-status').css('background-color', 'green');
}, function(){
    $('#azulH').animate({opacity: 0}, 1000);
    $('#bosque').css('opacity', '1');
    $('#hover-status').css('background-color', 'red');
});

$('#verdeA').hover( function(){
    $('#verdeH').animate({opacity: 1}, 1000);
    $('#bosque').css('opacity', '0');
    $('#hover-status').css('background-color', 'green');
}, function(){
    $('#verdeH').animate({opacity: 0}, 1000);
    $('#bosque').css('opacity', '1');
    $('#hover-status').css('background-color', 'red');
});

小提琴的例子

Answer 2

將淡入淡出的jquery .mouseenter（）更改為.mousemove（）。

Answer 3

將您的jquery .stop()更改為.stop(true,true)