Отменить привязку события наведения на набор img

У меня проблема с набором изображений. Моя цель — показать связанное изображение, когда вы наводите курсор на миниатюру, и скрыть его, когда вы разворачиваете изображение. Проблема в том, что мне нужно поставить задержку() при наведении курсора из-за дизайна модуля, имеющего 3 столбца, довольно сложно получить доступ к изображениям в среднем столбце. Эта задержка ставит наведение в очередь, показывая другим изображения, связанные с другими большими пальцами, на которые вы навели курсор. Это разметка:

<ul id="module">
  <li>
     <a href="#">
      <img src="thumbnail-image-1.jpg"> 
      <img src="image-1.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="thumbnail-image-2.jpg"> 
      <img src="image-2.jpg">
    </a>
  </li>
  ...
</ul>

А это js:

$('#module li a').each(function(i){
    $_imgs = $(this).find('img');
    $_imgs.eq(0).mouseover(function() {
        $(this).next().delay(800).fadeIn('slow');
    });
    $_imgs.eq(1).mouseout(function() {
        $(this).fadeOut('slow');
    });
});

Я думаю, что решение исходит от установки unbind()... Спасибо.


jquery each hover unbind
person Manu    schedule 23.12.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я добавил класс .tn к эскизам, но вы можете изменить его на свое решение .eq, если хотите.

Javascript (требуется jQuery 1.7)

$(function(){

    var timeout = false;

    $('#module > li').on('hover', 'a', function(e){
        var $elem = $(this).find('.tn');
        if(e.type == 'mouseenter'){
            timeout = setTimeout(function(){
                $elem.fadeIn();
            }, 800);   
        }
        else{
            timeout && clearTimeout(timeout);
            $elem.stop().fadeOut();
        }
    });

});

Посмотрите, как это работает здесь: http://jsfiddle.net/aX836/

person Christoph Geschwind    schedule 23.12.2011

arrow_upward
1
arrow_downward

используйте setTimeout(), чтобы вызвать задержку. setTimeout возвращает уникальный идентификатор, и, используя этот идентификатор, вы можете вызвать clearTimeout(id) и очистить таймер при наведении курсора мыши.

person Rishabh    schedule 23.12.2011
comment
решение, предложенное @Emre Erkan, использует setTimeout, но оно не работает, не могли бы вы быть более конкретным? Спасибо! - person Manu; 23.12.2011
comment
решение, предложенное @Emre Erkan, не будет работать, поскольку тайм-аут переменной не очищается при наведении курсора мыши, кроме того, вы должны создать массив с уникальным атрибутом каждого изображения в качестве ключа массива, а затем сохранить идентификаторы тайм-аута как значения. постараюсь создать фиктивный код и обновить в ближайшее время. - person Rishabh; 26.12.2011

arrow_upward
0
arrow_downward

Попробуй это:

$('#module li a').each(function(i){
    var $_imgs = $(this).find('img'), timeout, $next;
    $_imgs.eq(0).mouseover(function() {
        clearTimeout(timeout);
        $next = $(this).next();
        timeout = setTimeout(function() {
            $next.fadeIn('slow');
        }, 800);
    });
    $_imgs.eq(1).mouseout(function() {
        $(this).fadeOut('slow');
    });
});
person Emre Erkan    schedule 23.12.2011
comment
не работает... он продолжает сохранять другие события наведения, которые я сделал - person Manu; 23.12.2011