Javascript jQuery fadeIn（）和fadeOut（）没有延迟

早上好

我想在我的站点上插入jQuery

fadeIn（）

和

fadeOut（）

。理论上，我的代码是有效的，但有些东西我不喜欢。 将鼠标移动到

imagemap

的映射区域上，即可触发

fadeIn（）

。隐藏的

div

淡入，覆盖在imagemap上。离开贴图区域时，重叠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>

在淡入菜单中将jquery.mouseenter（）更改为.mousemove（）。
您应该查看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');
});

将jquery
.stop（）
更改为
.stop（true，true）
可能不相关，但在
azulH
和
verdeH
的定义后缺少一些分号。如果可能，可以发布
html
？Thanks@CalvinScherle这没关系，分号在语句末尾是可选的。@guest271314html，这不就是强制询问者所具有的效果吗
.mousemove（）
将意味着它将一直停止动画，直到鼠标停止，这正是他不想要的。不，我引用“我想要的是，无论鼠标停留多长时间，只要鼠标进入映射区域，de fadeIn（）就会启动。”但是
.mouseenter（）
还应在鼠标进入映射区域后立即触发。对我来说，“正在发生的是，de
fadeIn（）
只在鼠标停在映射区域上时开始，而不是通过将鼠标悬停在映射区域上。”然后，“我想要的是…”听起来像是“这正在发生，我不想发生”。但问题可能还不清楚，因为我们对它的解释有些不同。我希望鼠标一进入映射区域就立即触发效果，不要有任何延迟。不管鼠标是移动还是静止，只要鼠标一进入，淡入就会出现。@Billy我将
.mouseenter（）
更改为
.mousemove（）
，但这根本没有效果。我需要这样写吗？由于有很多悬停效果，我试着这样写：
$（document）.ready（function（）{$（function（）{$（“#verdeA”）.hover（function（）{$（“#verdeH”）.stop（）.fadeIn（“fast”）；
，但没有达到预期的效果

您不需要将其包装在

$（文档）中。就绪（函数（）{}）

当您以这种方式尝试时会发生什么？它不起作用。我不希望看到的效果留在那里。我稍后会尝试您的版本。稍等。

$（文档）。on（'hover'，'#azulA'，function（）{$（“#azulH”）。stop（）。fadeIn（“fast”）}，function（）{（“#azulA.mouseleave（function（）{$（“#azulH”）.stop（）.fadeOut（“fast”）}）

不起作用。什么都没有发生。没有

fadeIn

。是的，我得到了同样的结果…不确定为什么会发生