javascript - jQuery fadeIn() 和 fadeOut() 无延迟

Question

早上好，

我想在我的网站上插入 jQuery fadeIn() 和 fadeOut()。理论上，我的代码可以工作，但有一些我不喜欢的地方。将鼠标移到imagemap 的映射区域上即可触发fadeIn()。隐藏的 div 淡入，覆盖图像图。当离开映射区域时，覆盖的 div 会淡出。

发生的情况是，de 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>

一个东西的 fiddle 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');
});

你的多边形区域非常小，这也没有真正帮助，但我仍然设法让它工作。我确信您知道该区域在哪里(右下)，因为它是您的对象。

See this fiddle as an example当您将鼠标悬停在某个区域上时，该框将变为绿色，而当未悬停时该框将变为红色。

编辑:

因为我相信您正在寻找闪烁问题的解决方案...看看这段代码，这将有助于解决这个问题。您可以根据需要进行调整:

$('#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');
});

Example Fiddle