JQuery slideToggle timeout - PullRequest
Новая
       29

JQuery slideToggle timeout

1 голос
/ 23 сентября 2011

У меня есть простая html-страница: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
      $(document).ready(function() {

          $("button").click(function() {
              $("div").slideToggle("slow");
          });

      });
  </script>

  <style>
  div { width:400px; }
  </style>
</head>
<body>
  <button>Toggle</button>
  <div style="border: 1px solid">

    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </div>
</body>
</html>

Мне нужно автоматически скрывать панель div через 10 секунд, если мой курсор мыши не находится над панелью.Как я могу это сделать (изменить код выше), чтобы реализовать это?

Спасибо

Ответы [ 3 ]

3 голосов
/ 23 сентября 2011

Попробуйте этот код 

 if($('.to_hide').css("display") == "block")
{
    $(".to_hide").mouseout(function(){

        setTimeout(hidepara,10000);
    })
}
function hidepara()

    { $(".to_hide").hide();

}

Рабочий образец http://jsfiddle.net/kaYLG/

3 голосов
/ 23 сентября 2011

Чек http://jsfiddle.net/XRYLk/3/

Я добавил mouseleave, поэтому, если мышь была над ним при первом запуске функции, она установит таймер на mouseleave.

JQuery: 

    $("button").click(function() {
        $("div").slideToggle("slow");
    });

setTimeout(hidepanel, 4000);

function hidepanel(){
    if($('div').is(':hover') === false){ $('div').slideToggle(); }
}

 $('div').mouseleave(function(){ setTimeout(hidepanel, 4000); });
1 голос
/ 23 сентября 2011

Это очень простое решение.Идея в том, что если вы не наведете указатель мыши на контейнер div ... он будет slideUp() сам контейнер за 2000 мс (я поставил 2000 мс, потому что скучно ждать 10 с ). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        div {width: 400px; border: 1px solid;}
    </style>
</head>
<body>
    <div>
        This is the paragraph to end all paragraphs.  You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!
    </div>
    <script>
        $(document).ready(function () {
            var mouseover_to = setTimeout(function () {
                $("div").slideUp("slow");
            }, 2000); // Change it to 10000 to be 10sec
            $('div').mouseover(function () {
                clearTimeout(mouseover_to);
            });
        });
    </script>
</body>
</html>

[ Просмотр вывода ]

  1. Сначала он будет ждать до документаготов
  2. Он начнет обратный отсчет до 2000 мс с setTimeout() и установит его в качестве ресурса для переменной mouseover_to.
  3. Однако, если обнаружено mouseover()после div обратный отсчет будет отменен с clearTimeout(), благодаря помощи ресурса mouseover_to
...