jQuery fadeIn() and fadeOut() without delay

Question

Good Morning,

I want to insert a jQuery fadeIn() and fadeOut() on my site. Theoretically, the code I have works, but there is something what I dont like. The fadeIn() is triggered by moving the mouse over a mapped area of an imagemap. A hidden div is faded in, overlaying the imagemap. When leaving the mapped area, the overlaying div is faded out.

What is happening is, that de fadeIn() only starts when the mouse comes to rest over the mapped area, but not by hovering over it. So, in order to trigger the effect, the mouse needs to enter the mapped area and come to complete rest.

What I want instead is that de fadeIn() starts as soon as the mouse enters the mapped area, no matter how long it stays there.

Here an exerpt of my code

//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");
   });
});  
});

Any ideas how to accomplish this? If HTML Code is needed, I can provide it!

And here the 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>

A Fiddle of the thing http://jsfiddle.net/n96070kd/

Possibly unrelated but you are missing some semicolons after the definitions of `azulH` and `verdeH`. — Calvin Scherle, Nov 06 '14 at 15:44
@CalvinScherle That does not matter, semi-colons are optional at the end of a statement. — Spencer Wieczorek, Nov 06 '14 at 15:54

Adjit · Answer 1 · 2014-11-06T17:33:14.607

1

You should look into jQuery's mouseover() function. This will take effect only when the user is hovering over a certain area. It will run as soon as the user hover's the mouse over a certain area, regardless of cursor-speed etc.

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

It also didn't really help that your poly areas are very tiny, but I still managed to get it working. I am sure you know where the area's are (bottom right) since it is your object.

See this fiddle as an example The box will turn green when you are hovering over a certain area, and red when not hovered.

EDIT:

Because I believe you are looking for a fix to your blinking issue... take a look at this code, which will help take care of that. You can adjust it as necessary:

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

edited Nov 06 '14 at 17:33

answered Nov 06 '14 at 15:56

Adjit

10,134
12
53
98

Do I need to write it exactly like this? Since there are a lot of hover efects I tried to write it like this `$(document).ready(function() { $(function() { $("#verdeA").hover(function() { $("#verdeH").stop().fadeIn("fast"); });` but that did not have the desired effect. – Maccaroni Nov 06 '14 at 16:00
by doing `$(document).on('hover', '#azulA', function() {});` you don't need to wrap it in `$(document).ready(function(){});` What happens when you try it that way? – Adjit Nov 06 '14 at 16:02
Its not working. The effect which I do not want stays there. I try your version in a sec. Hang on. – Maccaroni Nov 06 '14 at 16:05
`$(document).on('hover', '#azulA', function(){ $("#azulH").stop().fadeIn("fast"); }, function() { $("#azulA").mouseleave(function() { $("#azulH").stop().fadeOut("fast"); });` is not working. Nothing is happening. No `fadeIn`. – Maccaroni Nov 06 '14 at 16:15
yeah, I'm getting the same thing... not sure why it's happening – Adjit Nov 06 '14 at 16:20
I just started in jQuery and JS and I am absolutely not an expert. But why writing `hover` inside the `()` and in `''`? Doesnt that indicating that we are refering to a DOM or somehting? – Maccaroni Nov 06 '14 at 16:21
its a different way of calling it. This way you don't have to wrap all of your functions inside `$(document).ready()` you will always be able to access the elements. – Adjit Nov 06 '14 at 16:27
That works partially. It only works when I remove the `stop()`, but then it flickr (it fades in twice, http://stackoverflow.com/questions/26434241/stop-function-stops-other-controling-parameters). Adding the `stop()`, it goes back to the delay. – Maccaroni Nov 06 '14 at 16:51
if you don't want a delay, why not just do `.show()` and `.hide()` instead of `.fadeIn()` and `.fadeOut()`? – Adjit Nov 06 '14 at 16:52
I do not want a delay for the effect to be triggered, but I want to fadeIn effect. Just without a delay when the mouse enters the mapped area. – Maccaroni Nov 06 '14 at 16:54
@Maccaroni oooh, I know what the issue is... what is happening is when the overlay fade's in it is placed over the map area, so you are technically no longer hovering over the map and so it fades back out and back in again – Adjit Nov 06 '14 at 17:25
I think the blinking is triggered differently, as described here: http://stackoverflow.com/questions/10890776/how-to-stop-fadein-blinking , http://stackoverflow.com/questions/5967313/jquery-fade-flickers and here http://stackoverflow.com/questions/7172498/jquery-fadein-fadeout-flicker-on-rollover – Maccaroni Nov 06 '14 at 17:29
@Maccaroni take a look at my updated answer. There is no more flickering – Adjit Nov 06 '14 at 17:33
I will test that in a minute. But just to make that clear. I am not looking for a solution the flickering, that why I have the `.stop()` in my code! The flickering occours, applying your first peace of code (above the editing). That why I mentioned it. – Maccaroni Nov 06 '14 at 17:44
Right, but I believe that is the cause of the flickering. The ordering in which the elements are on top of eachother. – Adjit Nov 06 '14 at 17:46
I create a JSFiddle, then you can see yourself what the problem is. – Maccaroni Nov 06 '14 at 17:53
@Maccaroni Yes, I do see what is causing the problem. It is because of the layering of elements. I added a hover indicator. Notice that it turns green and then immediately red -- that is because the element you are fading in fades over the image map, so technically you are no longer hovering over the mapped element. That is what is causing the flash: http://jsfiddle.net/n96070kd/1/ – Adjit Nov 06 '14 at 19:44

score 0 · Answer 2 · answered Nov 06 '14 at 15:50

0

Change your jquery .mouseenter() for .mousemove() on the fade ins.

answered Nov 06 '14 at 15:50

Billy

2,448
1
10
13

Won't that just force the effect that the asker is having? `.mousemove()` will mean it will keep stopping the animation until the mouse comes to rest, which is exactly what he *doesn't* want. – Calvin Scherle Nov 06 '14 at 15:52
No, I quote" What I want instead is that de fadeIn() starts as soon as the mouse enters the mapped area, no matter how long it stays there." – Billy Nov 06 '14 at 15:54
But `.mouseenter()` should also trigger as soon as the mouse enters the mapped area. And to me, "What is happening is, that de `fadeIn()` only starts when the mouse comes to rest over the mapped area, but not by hovering over it." and then "What I want instead..." sounds to me like "This is happening and I don't want it to". But maybe the question is unclear, since we both interpreted it somewhat differently. – Calvin Scherle Nov 06 '14 at 15:58
I want the effect to be triggered as soon as the mouse enters the mapped areas, without any delay. The fade in shall come as soon as the mouse enters, no matter weather it is moving or coming to rest. – Maccaroni Nov 06 '14 at 16:23
@Billy I changed the `.mouseenter()` to `.mousemove()` but that resulted in no effect at all – Maccaroni Nov 06 '14 at 16:30

score 0 · Answer 3 · answered Nov 06 '14 at 17:43

0

Change your jquery .stop()'s to .stop(true,true)

answered Nov 06 '14 at 17:43

Chris Wheeler

1,623
1
11
18

jQuery fadeIn() and fadeOut() without delay

3 Answers3

EDIT: