Задержка парения анимация

Question

Мой код:

$(document).ready(function() { 
    $('.holder').hover(function() { 
     $(this).find('.heading').slideUp(); 
    },function() { 
     $(this).find('.heading').slideDown(); 
    }); 
}); 

Теперь я хочу, чтобы реализовать функцию setTimeout. Но проблема может быть $(this)

Answer 1

Просто хранить $(this) в переменной и использовать эту переменную в вашей анонимной функции:

$(document).ready(function() { 
    $('.holder').hover(function() { 
     var $self = $(this); 
     setTimeout(function(){ 
      $self.find('.heading').slideUp(); 
     }, 500); 
    },function() { 
     $(this).find('.heading').slideDown(); 
    }); 
}); 

Edit В ответ на комментарии:

$(document).ready(function() { 
    var timer; 
    $('.holder').hover(function() { 
     var $self = $(this); 
     timer = setTimeout(function(){ 
      timer = false; 
      $self.find('.heading').slideUp(); 
     }, 2000); 
    },function() { 
     if(timer){ 
      clearTimeout(timer); 
      timer = false; 
     }else{ 
      $(this).find('.heading').slideDown(); 
     } 
    }); 
}); 

Answer 2

Если вы хотите дождаться слайда, вы можете сделать следующее:

$(document).ready(function() { 
    $('.holder').hover(function() { 
     $(this).find('.heading').slideUp(); 
    },function() { 
     var me = this; 
     setTimeout(function() { $(me).find('.heading').slideDown(); }, 1000); 
    }); 
}); 

Answer 3

нет комплектTimeout необходимо.

http://jsfiddle.net/v6pmv/

$(this).find('.heading').delay(1000).slideUp(); 

Answer 4

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

Попробуйте отменить свой тайм-аут каждый раз, когда вы наведите указатель мыши. Пример:

function slideHover() 
{ 
    jqHolder = $('.holder'); 
    var time = jqHolder.data('time'); 
    if (time) 
    { 
     clearTimeout(time); 
    } 
    time = setTimeout(function() { 
     jqHolder.find('.heading').slideToggle(); 
    }, jqHolder.is(':hidden') ? 0 : 500); 
    jqHolder.data('time',time); 
} 

$(document).ready(function() { 
    $('.holder').hover(slideHover, slideHover); 
});