Использование JQuery для эффекта mouseover и очереди

Question

Я искал последние пару часов о том, как это сделать - не могу найти его нигде.

У меня есть несколько кнопок (divs). Он состоит из div в div. У родительского div есть нормальное фоновое изображение кнопки, у ребенка светлее светлое фоновое изображение. На Mouseover я хочу, чтобы дочерний div переместился в непрозрачность 1.0, затем уменьшился до 0.2 (так что это выглядит как вспышка). На MouseOut просто нужно вернуться к 0.0. Очевидно, я не хочу наращивать очередь очереди MouseOver/MouseOut.

Я посмотрел на эффекты очереди, но я не могу понять, как заставить это работать с кнопкой MouseOver. Плюс я сосать в JS.

Answer 1

Вы должны использовать MouseEnter и MouseLeave. События курсора перемещаются внутри элемента.

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

Вы ознакомились с методом fadeTo? http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

Это должно быть что-то вроде этого (не проверял, хотя)

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

Answer 3

Проблема заключается в том Hover имеет функцию, а также, и я думаю, что я путаюсь ...

адрес по ДИВ называется 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

непроверено, но должно быть довольно близко.

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