задержка при наведении курсора

Question

Надеюсь, кто-нибудь может помочь.У меня есть код ниже, который когда пользователь наводит курсор на имя, изображение и текст в div справа меняются.

Как я могу отложить наведение, чтобы, когда пользователь пролистывает страницу, оно не меняло содержимое быстро ... если это имеет смысл

Answer 1

Если вам нужна только задержка, вы можете добавить тайм-аут, который изменит ваш JavaScript на что-то вроде:

$(document).ready(function() {
    var timeout = null;
    var delay = 500;
    var switches = $('.switches > li');
    var slides = $('#slides > div');
    switches
        .each(function(idx) { $(this).data('slide', slides.eq(idx)); })
        .hover(
            function() {
                var hoveredElement = $(this);
                timeout = setTimeout(function(){
                    switches.removeClass('active');
                    slides.removeClass('active');             
                    hoveredElement.addClass('active');  
                    hoveredElement.data('slide').addClass('active');
                }, delay);
            },
            function(){
                clearTimeout(timeout);
                slides.removeClass('active');
            });
    });

Вдобавок к этому, возможно, было бы лучше, если бы вы плавно добавляли содержимое на слайдах, используя методы animate () и stop (), чтобы остановить его, если пользователь зависает над большим количеством опций.

Answer 2

Вам нужно это:

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 3

Мы можем использовать mouseenter и mouseout из jQuery

$(document).ready(function() {
    switches = $('.switches > li');
    var delay = 500;
    switches.
        mouseenter(function( ) {                   
            var $self = $(this);
            $self .data("inHover", "true");
            setTimeout(
                function(){
                    if( $self.data("inHover") == "true" ){
                        $self.addClass("active");
                     }    
                 }, 
                 delay
            );
            }).
           mouseout(     
               function(){
                   $self .data("inHover", "false");
                   $self.addClass("active");
          });
   }); 

Answer 4

Проверьте плагин jQuery.hoverIntent , он будет делать именно то, что вам нужно