JQuery парение с setTimeout (противоположно hoverIntent) - PullRequest
Новая
       18

JQuery парение с setTimeout (противоположно hoverIntent)

2 голосов
/ 11 мая 2010

У меня есть набор изображений, для каждого из которых я хотел бы переворачиваться и мигать на другое изображение в течение примерно половины секунды, а затем возвращаться к исходному изображению, даже если мышь все еще находится над изображением (т.е. мышки нет)

Было предложено setTimeout, но я не могу понять, как правильно его использовать.

http://thepool.ie/rollover/

Вот пример страницы .... Мне бы хотелось, чтобы изображение, появляющееся при наведении курсора, появлялось, а затем снова быстро исчезало.

Я искал в Интернете примеры и ничего не могу найти ... любая помощь будет принята с благодарностью.

Спасибо, Andrew

Редактировать:

Этот код я сейчас использую для наведения изображения 

$(document).ready(function(){   
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

});

Ответы [ 4 ]

7 голосов
/ 11 мая 2010

Использовать setTimeout легко. Он принимает функцию в качестве первого аргумента - как и многие методы jQuery - и время в миллисекундах в качестве второго.

Я начал с вашего кода и немного изменил его рефакторинг. Первоначально, имелась возможность возникновения состояния гонки, если пользователь наведет курсор мыши на изображение, а затем снова на него, прежде чем таймер сработает. Теперь логика переключения на альтернативное изображение и обратно на оригинал отделена. Обработчик при наведении курсора также замыкается, если изображения уже выгружены. Я также кэширую объект jQuery, возвращаемый $(this), для небольшого улучшения скорости (кэширование объектов jQuery - хорошая практика).

Я изменил атрибут hover на data-hover (спецификация HTML5 позволяет использовать пользовательские атрибуты, но требует, чтобы они начинались с data-) и проверил его наличие в селекторе при наведении курсора.

Наконец, я удалил лишнюю ready оболочку ($(document).ready(function(){…}) и $(function(){…} одинаковы, не нужно иметь их обоих). 

$(function() {
    $('.rollover[data-hover]').mouseover(function() {
        var $this = $(this), originalImage = $this.attr('src');
        if ($this.data('imagesSwapped')) {
            return;
        }
        $this.attr('src', $this.attr('data-hover')).data('imagesSwapped', true);
        setTimeout(function(){
            $this.attr('src', originalImage).removeData('imagesSwapped');
        }, 500);
    });
});

Код не был проверен.

0 голосов
/ 19 ноября 2012

Есть лучший способ, которым setTimeOut

вы можете использовать $('.rollover').mouseenter(function() { вместо $('.rollover').hover(function() { http://api.jquery.com/mouseenter/

0 голосов
/ 11 мая 2010

Что-то вроде 

$('#myid').hover(function() {
    $(this).addClass('hovered');
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100);
});
0 голосов
/ 11 мая 2010

Здесь вы можете найти несколько наглядных примеров:

http://www.electrictoolbox.com/using-settimeout-javascript/

Но я бы лично посоветовал вам использовать плагин Timers, который более удобен в использовании: http://jquery.offput.ca/every/

...