Показать меню через 2 секунды

Question

У меня проблемы с отображением <div> через 2 секунды .. Моя проблема в том, что при наведении курсора на кнопку меню отображается без задержки, и я хочу задержку в 2 секунды ...

Попробуйте навести курсор: Mere på cabiweb, затем появится меню -> Вы можете увидеть его здесь

Код:

<script>$(document).ready(function() { 
    $("#dropdown").hover(function(){
        $(".drop-inner").delay(2000).show();
      });
    });</script>

Answer 1

Используйте время ожидания вместо .delay(), последнее только влияет на функции в очереди (например, эффекты):

$("#dropdown").hover(function() {
    setTimeout(function() {
        $(".drop-inner").show();
    }, 2000);
});

Answer 2

Вы можете использовать функцию javascripts setTimeout, чтобы задержать выполнение:

<script>
  $(document).ready(function() { 
    $("#dropdown").hover(function() {

       setTimeout(function() {
          $(".drop-inner").show()
       }, 2000);

     });
  });
</script>

Answer 3

Я согласен с решением setTimeout, но ... что если пользователь уберет курсор мыши с #dropdown до истечения этих 2 секунд?

<script>
    $(document).ready(function() { 
        $("#dropdown").hover(function(){
            $.data(this, "timer", setTimeout($.proxy(function() {
                $(".drop-inner").show();
            }, this), 2000));
        },
        function() {
            clearTimeout($.data(this, "timer"));
            $(".drop-inner").hide();
        });
    });
</script>

Проверьте пример на http://jsfiddle.net/vundicind/Lqq3h1xa/1/.

Answer 4

Не похоже, что .show() будет работать с .delay():

Добавленный в jQuery в версии 1.4, метод .delay () позволяет нам задерживать выполнение функций, которые следуют за ним в очереди. Его можно использовать со стандартной очередью эффектов или с пользовательской очередью. Только последующие события в очереди задерживаются; например, это не задержит формы без аргументов .show () или .hide (), которые не используют очередь эффектов.

Answer 5

Как указано в документации jQuery:

Метод .delay() лучше всего подходит для задержки между эффектами jQuery, находящимися в очереди.Поскольку он ограничен - он, например, не предлагает способ отменить задержку..delay() не является заменой встроенной функции JavaScript setTimeout, которая может быть более подходящей для определенных случаев использования.

Если бы вы использовали fadeIn или какой-либо другой эффект jQuery, ваш код работал бымежду эффектами.

То, что вы хотите сделать, это что-то вроде http://jsfiddle.net/BQhwd/

Я предположил, что вы хотели hide() и через 2 секунды.

Answer 6

Попробуйте эту функцию Анимировать

<script>$(document).ready(function() { 
    $("#dropdown").hover(function(){
        $(".drop-inner").animate({},2000,function(){
         //animation complete
});

      });
    });</script>

Answer 7

Использование setTimeout(expression, delay);

$("#dropdown").hover(function(){
    setTimeout(doSomething(), 2000);
  });
});

А потом в отдельной функции

<script>
    function doSomething() {
        $(".drop-inner").show();
    }
</script>