Как добавить временную задержку

Question

Я хотел бы добавить пользовательский класс для мыши. Так что, когда мышь зависает над .leftbar, добавляется класс, и его нужно всплывать (я устанавливаю для него css). Как добавить slow или временную задержку для всплывающего окна?

<script> 
$(document).ready(function(){ 
$(".leftbar").mouseenter(function() { 
$("body").addClass("myclass"); 
}); 
}); 

$(document).ready(function(){ 
$(".leftbar").mouseleave(function() { 
$("body").removeClass("myclass1"); 
}); 
}); 
</script> 

Я попытался this- $("body").addClass("myclass" , '300'); без везения

Спасибо!

Answer 1

Вы можете использовать SetTimeout

$(document).ready(function(){ 
    $(".leftbar").mouseenter(function() { 
     window.setTimeout(function(){ 
      $("body").addClass("myclass"); 
     }, 300); 
    }); 
}): 

См https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

Answer 2

Используйте setTimeout, будучи уверенным, чтобы очистить его, когда курсор уходит.

мелкий ошибка, но myclass != myclass1.

$(document).ready(function(){ 
    var barTimeout = 0; 
    $(".leftbar").on({ 
     mouseenter: function(){ 
      barTimeout = setTimeout(function(){ 
       $("body").addClass("myclass"); 
      }, 300); 
     }, 
     mouseleave: function(){ 
      if(typeof barTimeout !== 'undefined') clearTimeout(barTimeout); 
      $("body").removeClass("myclass"); 
     } 
    }); 
}); 

JSFiddle

Answer 3

Вы могли бы взглянуть на метод JQuery UI addClass, который позволяет передать некоторые параметры анимации в нее. Посмотреть пример и документацию здесь http://api.jqueryui.com/addClass/

Для вашего использования, он должен быть столь же просто, как добавление к задержке на addClass()

Добавить ссылку на библиотеку JQuery, а затем изменить код к;

$("body").addClass("myclass", 300); 

Answer 4

Вы можете сделать это следующим образом:

$(document).ready(function() { 
    $(".leftbar").hover(function() { 
     $(this).delay(300).queue(function(next){ 
      $(this).addClass("myclass"); 
      next(); 
     }); 
    }, function(){ 
     $(this).delay(300).queue(function(next){ 
      $(this).removeClass("myclass"); 
      next(); 
     }); 
    }); 
}); 

Проверьте это здесь: JSFiddle