Question

I’ve been looking around for the last couple hours on how to do this – can’t find it anywhere.

I have several buttons (divs). It consists of a div within a div. The parent div has the normal button background image, the child has a lighter glowy background image. On Mouseover, I want the child div to go to an opacity of 1.0, then fade out to 0.2 (so it looks like a flash). On MouseOut, it just needs to go back to 0.0. Obviously I don’t want MouseOver/MouseOut queue buildup.

I looked at queue effects, but I can’t figure out how to get this to work with a MouseOver button. Plus I suck at JS.

Answer 1

You should use mouseenter and mouseleave. The mouseover and mouseout events fire continuously as the cursor is moved inside of an element.

$(".button")
    .mouseenter(function() {
        var overlay = $("div:first",this).fadeTo(350, 1.0, function() {
            overlay.fadeTo(350, 0.2);
        });
    })
    .mouseleave(function() {
        $("div:first", this).stop().fadeOut(350);
    });