Question

早上好，

我想在我的网站上插入jQuery fadeIn()和fadeOut()。从理论上讲，我的代码有效，但有些东西我不喜欢。通过将鼠标移动到fadeIn()的映射区域来触发imagemap。隐藏的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>

事情的小提琴 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

Answer 2

在淡入淡出中更改.mousemove（）的jquery .mouseenter（）。

Answer 3

将您的jquery .stop()更改为.stop(true,true)

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

3 个答案:

编辑：