Использование Jquery для эффекта наведения мыши и очереди

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

У меня есть несколько кнопок (div). Он состоит из div внутри div. Родительский div имеет обычное фоновое изображение кнопки, дочерний элемент имеет более светлое светящееся фоновое изображение. При наведении курсора я хочу, чтобы дочерний элемент div достигал непрозрачности 1,0, а затем исчезал до 0,2 (так что это выглядит как вспышка). В MouseOut нужно просто вернуться к 0.0.0. Очевидно, я не хочу наращивания очереди MouseOver/MouseOut.

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


queue jquery mouseover effects
person Jared    schedule 08.12.2009    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вы должны использовать mouseenter и mouseleave. События 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);
    });
person joshperry    schedule 08.12.2009
comment
Хм, не мог заставить это работать? имя родителей — ButtonBG, ребенка — ButtonBGanim, так что я, но #ButtonBG, где ваша кнопка .but... не подходит. - person Jared; 08.12.2009
comment
что случается? ошибка? у вас установлен firebug или какой-либо отладчик javascript? - person joshperry; 09.12.2009

arrow_upward
0
arrow_downward

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

Должно быть примерно так (хотя не проверял)

var childdiv = $("#childdiv");
childdiv .fadeTo(500, 1.0, function(){ 
  childdiv .fadeTo(500, 0.2);
});
person peter p    schedule 08.12.2009
comment
ключ в том, чтобы поместить 2-й фейд в обратный вызов 1-го. - person peter p; 08.12.2009

arrow_upward
0
arrow_downward

Проблема в том, что у 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)
});
person Jared    schedule 08.12.2009

arrow_upward
0
arrow_downward

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

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