0

I have a <div> on my web page that I would like to have an opacity of 1 while you're hovering over it, but when the mouse is not hovering over it I would like it to fade to an opacity of 0.3. My problem is that currently when I hover over the <div> it starts fading in and out several times (rather than just once). I'm not sure if this is why, but I suspect it's because it detects the mouse rolling over the multiple <div>s that are within the one that I set to fade out.

Here is a very simplified segment of my web page to illustrate what I have so far:

<div id="div1">
    <div id="div2" onmouseover="fadeElementTo('div1', 500, 1)" onmouseout="fadeElementTo('div1', 500, 0.3)">
        <div id="div3">
            <div id="div4">
            </div>
        </div>
    <button id="myButton" onclick="doACoolAnimation()" ></button>
    </div>
</div>

My fadeElementTo() function is pretty simple:

function fadeElementTo(eid, speed, opacity, callback) {
    $("#" + eid).fadeTo(speed, opacity, callback);
}

In case it's relevant, I also have a button that animates the same div by simply moving it left or right when the button is clicked.

function doACoolAnimation() {
    var hiddenState = GLOBAL_VAR.hiddenState;

    // If the <div> is already hidden, make it visible
    if (hiddenState == null || hiddenState == 1) {
        GLOBAL_VAR.hiddenState = 0;
        $("#div1").animate({
            left: "0px"
        }, 1500);
    }
    // Otherwise, hide it
    else {
        GLOBAL_VAR.hiddenState = 1;
        $("#div1").animate({
            left: "-800px"
        }, 1500);
    }
}

Any ideas what might be causing my bug? And better yet, what can I do to fix it?

Steph
  • 2,135
  • 6
  • 31
  • 44

3 Answers3

5

Try onmouseenter instead of onmouseover and use jQuery to attach/bind those events rather than the attributes so it works the same across all browsers.

$('#outer').mouseenter(function() {
  $('#log').append('<div>Handler for .mouseenter() called.</div>');
});

see here

kushyar
  • 1,191
  • 1
  • 6
  • 10
  • Thanks, this definitely did the trick! And thanks for the advice about not using the attributes. – Steph Jun 06 '13 at 22:27
  • 1
    I know that the difference between `mouseenter` and `mouseover` is explained in the given link but i think this is also helpful especially with the fiddle of the accepted answer: [Jquery mouseenter() vs mouseover()](http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover) – t.niese Jun 06 '13 at 22:27
  • Thanks, that is also helpful. I was going off the information from [the W3C website](http://www.w3schools.com/jsref/dom_obj_event.asp), which made it sound like `onmouseover` only fires an event when the mouse enters the element. It doesn't even mention `onmouseenter` on that web page, so I didn't even realize that existed. – Steph Jun 06 '13 at 22:30
  • @Steph `mouseenter` is still IE only and only _emulated_ by jQuery. – t.niese Jun 06 '13 at 22:31
  • onmouseenter as an attribute is only specific to to IE, that's why there is no mention of it on W3C, but jQuery makes it accessible across all browsers. – kushyar Jun 06 '13 at 22:31
1

Use mouseenter event to stop event bubbling, and stop method to make sure you clear unfinished animations on that element.

$('#div2').mouseenter(function(){
    $('#div1').stop().fadeTo(500,1);
});
Goran Lepur
  • 594
  • 1
  • 4
  • 15
  • Thanks, the bit about the `stop` method is extremely helpful as well! My only issue is that when I use the stop, it stops both my animation and the fading. I want to make it just stop fading events, which the jQuery documentation says you can do if you pass in a parameter with the name of the event you want to stop. I can't find any documentation on what event names are, though, and none of my best guesses have worked so far. Do you know how I could do this? – Steph Jun 06 '13 at 23:08
  • It isn't possible to clear just one animation using stop as all animations in `jQuery` are running in same function. You can however perform your animations with `.animate()` function passing `queue:false` parameter to make them execute immediately. Check out this topic http://stackoverflow.com/questions/4949784/stopping-specific-jquery-animations – Goran Lepur Jun 08 '13 at 07:59
0

It detects the events multiple times. For example, if you want to change the size, going on and off fast changes the size even when the mouse is not on the div. The code needs to exit the program when the mouse is not on the div. To do that, you might include the code in something that kills the code when the mouse is not on top of the div so that the queued fades/animations do not run.

Edit: Try looking at the JQuery documentation to see if there is anything that you can use. You might able to use these:

BitLion
  • 103
  • 1
  • 18