Usando jQuery para efecto del ratón y cola

Question

He estado buscando alrededor por el último par de horas sobre cómo hacer esto -. No puede encontrar en cualquier lugar

Tengo varios botones (divs). Consiste en un div dentro de un div. El div padre tiene la imagen del botón de fondo normal, el niño tiene una imagen de fondo glowy más ligero. En Mouseover, quiero que el div hijo vaya a una opacidad de 1,0, a continuación, fundido de salida a 0,2 (para que se vea como un flash). En mouseOut, sólo tiene que volver a 0.0. Obviamente no quiero mover el ratón / mouseOut acumulación de cola.

Miré a efectos de la cola, pero no puedo encontrar la manera de conseguir que esto funcione con un botón al mover el ratón. Además soy muy malo en JS.

Answer 1

Debe utilizar MouseEnter y mouseleave. El fuego eventos mouseover y mouseout continuamente a medida que el cursor se mueve en el interior de un elemento.

$(".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 2

¿Tuvo un vistazo al método fadeTo? http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

Debe ser algo como esto (no lo he probado, sin embargo)

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

Answer 3

El problema es Hover tiene una función, así, y creo que me estoy confundido ...

div abordar la llamada 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 4

no probado, pero debe ser bastante estrecha.

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