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

Question

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

У меня есть несколько кнопок (DOV). Он состоит из дивизий в рамках дивизии. У родительского Div есть обычное фоновое изображение кнопки, у ребенка более светлое светящее фоновое изображение. На Mouseover я хочу, чтобы детский див отправился на непрозрачность 1,0, а затем исчезал до 0,2 (так что это выглядит как вспышка). На Mouseout он просто должен вернуться к 0,0. Очевидно, я не хочу, чтобы Mouseover/Mouseout QueueUp.

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

Answer 1

Вы должны использовать мышиный и мышиный. События Mouseover и Mouseout постоянно стреляют, когда курсор перемещается внутри элемента.

$(".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 также есть функция, и я думаю, что я запутался ...

адресовать div под названием 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);
      }
    );