Анимировать изображение после наведения элемента на секунду - PullRequest
Новая
       7

Анимировать изображение после наведения элемента на секунду

0 голосов
/ 25 апреля 2010

после некоторых попыток заставить это работать, я спрашиваю вас, знаете ли вы, где моя ошибка.

Это мой код до сих пор: 

$(".menu a").hover( function () {
  $(this).data('timeout', setTimeout( function () {
        $(this).hover(function() {
            $(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});

я был бы рад некоторой помощи.

Я пробовал это, но это не работает. Еще одна информация, возможно, сделает ее более понятной. у меня была такая функция: 

$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
}, function() {
    $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});

это сработало, но так будет видно сразу. поэтому я нашел это, чтобы установить таймер, чтобы он показывал всплывающее окно только через одну секунду в этом примере: 

$("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {
    alert('You have been hovering this element for 1000ms');
  }, 1000));
}, function () {
  clearTimeout($(this).data('timeout'));
});

оба сработали самостоятельно, но если я собрал их вместе, это ничего не делает

Ответы [ 2 ]

2 голосов
/ 25 апреля 2010

Внутри обратного вызова setTimeout, this не относится к элементу наведения.

Чтобы исправить это, вам нужно создать отдельную переменную в обработчике событий, например: (каламбур предназначен) 

$(".menu a").hover( function () {
    var me = $(this);

    me.data('timeout', setTimeout( function () {
        me.hover(function() {
            me.next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {    
    clearTimeout($(this).data('timeout'));
});

Вам не нужно использовать me внутри внутренних hover обработчиков, но вы также можете.

1 голос
/ 25 апреля 2010

Theres хороший плагин, который делает это: hoverIntent . Замените .hover на .hoverIntent, и вам не придется иметь дело с установкой и очисткой тайм-аута вручную.

...