Question

我有一个带有多个映射区域的复杂图像映射。在鼠标悬停或点击时，我想将这些图像映射与其他具有完全相同大小的图像重叠，并且位于完全相同的位置。到现在为止还挺好。

这样做，我在鼠标悬停或点击时添加了.fadeIn()和.fadeOut()。常见问题 - 在线解决方案负载。 fadeIn()闪烁/闪烁。我在这里找到了这个解决方案jQuery fade flickers。所以我添加了.stop()（我不理解animate()解决方案Jquery - fadeIn/fadeOut flicker on rollover或How to stop fadeIn() blinking?，或者更好，不知道如何实现它。）

但现在，我无法控制.fadeIn()和.fadeOut()的时间。此外，只有.mouseenter()有效，但.click()无效。除此之外，一切正常。图像叠加，褪色的图像位于正确的位置......它只是那种不会起作用的褪色。

在我的代码的下面。

<head>
<script>

//PRELOAD THE IMAGES
verde = new Image(698, 360)
verde.src = "imagenes_png/verde_mouse.png";

azul = new Image(698, 360)
azul.src = "imagenes_png/azul_mouse.png";

//there are more images preloaded


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


//jQUERY FADE
$(document).ready(function() {
    $(function() {
    $("#verdeA").click(function() {
         $("#verde").stop().fadeIn("1000");
    });
    $("#verdeA").mouseleave(function() {
        $("#verde").stop().fadeOut("500");
    });
    $("#azulA").mouseenter(function() {
        $("#azul").stop().fadeIn("5000");
    });
    $("#azulA").mouseleave(function() {
        $("#azul").stop().fadeOut("500");
        });    
    });  
});

</script>
</head>

<body>
<!-- INSERT THE PICTURE -->
<div id="juego_bosque">
<img name="bosque" id="bosque1" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" style="position:absolute" />

<!-- CREATE THE MAP -->
<map name="bosque_m" id="bosque_m">
<area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324" 
alt="" />
    <area shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249" 
id="azulA" alt="" />

<!-- HIDDEN PRELOADED IMAGES --> 
<div id="azul" style="display:none; position:absolute"></div>
<div id="verde" style="display:none; position:relative"></div>

</div>

</body>

这里是小提琴http://jsfiddle.net/6fq6ymx2/ 在小提琴上，两个非常右侧突出显示的图形增加了效果。

stop（）函数停止其他控制参数

0 个答案: