2012-01-04 3 views
0

У меня возникла проблема с jquery. У меня есть divblock с "show_your_stuff". Когда я нажимаю на другой div-блок, я хочу. Когда я снова нажимаю мышь, divblock уходит. Я хочу, чтобы divblock исчезал через 60 секунд, когда снова не делал новую мышь. Может кто-нибудь мне помочь?JQuery hover со временем

Это мой код:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a#controlbtn").hover(function(e) { 
      e.preventDefault(); 
      var slidepx=$("div#linkblock").width() + 10; 
      if (!$("div#maincontent").is(':animated')) { 
       if (parseInt($("div#maincontent").css('marginRight'), 10) < slidepx) { 

        $(this).addClass('close').html('Show your stuffs'); 
        margin = "+=" + slidepx; 

        } else { 
        $(this).removeClass('close').html('Hide your stuffs'); 
        margin = "-=" + slidepx; 
       } 
       $("div#maincontent").animate({ 
        marginRight: margin 
       }, { 
        duration: 'slow', 
        easing: 'easeOutQuint' 
       }); 
      } 
     }); 

    }); 
</script> 

ответ

2

Вы можете использовать setTimeout и clearTimeout отложить и отменить скрыть эффект, когда листья мыши и залез соответственно:

$(element).mouseover(function() { 
    if (typeof delayTime != 'undefined') 
     window.clearTimeout(delayTime); 
    $('#tooltip').animate({/*CSS to show element*/},{duration: XXX, queue: false}); 
}); 
$(element).mouseout(function() { 
    delayTime = window.setTimeout(function(){ 
     $('#tooltip').animate({/*CSS to hide element*/},{duration: XXX, queue: false}); 
    }, XXX); 
}); 

... Где каждый XXX представляет собой число, представляющее задержку или истечение в миллисекундах.

+0

Спасибо! #tooltip - это мое имя? Извините, но он не работает. – craphunter

+0

'# tooltip' - это фиктивное значение' id' для элемента, который вы пытаетесь показать/скрыть от mouseover/mouseout. Вам нужно будет заменить это на 'class' или' id' или любой селектор, который эффективно возвращает элемент, который вы на самом деле нацеливаете в свой код. – Aaron

+0

Можете ли вы разместить html-код для меня или/и CSS? Но я думаю, что html-код будет лучше. Я действительно не знаю, что я делаю неправильно! – craphunter

0

Я использую HoverIntent, а также для таких задач, как это. Он имеет такие функции, как чувствительность и таймаут. Чувствительность означает, что вы можете переместить X-число пикселей в сторону от элемента наведения до того, как он погасит событие «out» и тайм-аут в течение времени, находящегося вне hoveritem, перед тем как запустить событие out.

Смежные вопросы