Using Jquery for mouseover effect and queue

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

Did you have a look at the fadeTo method? http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

It should be something like this (haven't tested it, though)

var childdiv = $("#childdiv");
childdiv .fadeTo(500, 1.0, function(){ 
  childdiv .fadeTo(500, 0.2);
});

Answer 2

The problem is Hover has a function as well, and I think I am getting confused...

address the div called ButtonBGanim:

$(document).ready(function(){

var buttonbg = $("#ButtonBGanim");

$(buttonbg).hover(
function() {
$(this).stop().fadeTo(500, 1.0, function(){ 
  buttonbg .fadeTo(500, 0.2);
},
function() {
$(this).stop().fadeTo(500, 0.0)
});

Answer 3

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

Answer 4

untested but should be pretty close.

$("#id").hover(
      function () {
    $(this).stop().children("div").fadeTo("fast", 1.0).fadeTo("slow", 0.2);
      }, 
      function () {
        $(this).stop().children("div").fadeTo("slow", 0.0);
      }
    );