задержка добавления / удаления класса при наведении курсора мыши

Question

задержка добавления / удаления класса при наведении курсора мыши

0

Я пытаюсь отложить добавление и удаление классов в элементы, когда пользователь наводится на элемент:

$('#thumbs div').mouseenter(function() {            
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
});

Есть ли способ сделать это? Например, мне нужна задержка около 0,3 секунды.

Благодарю!

user1937021 23 сен. 2013, в 19:47

Источник

Теги:

jquery

4 ответа

0

$("#thumbs div").mouseenter(function() {            
    var self = $(this);    

    self.removeClass('hovered');

    window.setTimeout(function() {
        self.addClass('hovered');
    }, 300);
});

Roy Miloh 23 сен. 2013, в 16:27

0

Задержка jQuery работает только в очереди FX, то есть анимации, а не другими методами.
adeneo 23 сен. 2013, в 17:45
0

Ну, я не был уверен в этом, поэтому я также добавил второй вариант. Я отредактирую
Roy Miloh 23 сен. 2013, в 17:49

0

Вы можете попробовать что-то вроде этого

$("#thumbs div").on('mouseenter', function() {            
    var el = $(this);    
    setTimeout(function() {
        $('#thumbs div').removeClass('hovered');
        el.addClass('hovered');
    }, 300);
}).on('mouseleave', function(){
    var el = $(this);
    setTimeout(function() {
        el.removeClass('hovered');
    }, 300);
});

DEMO.

The Alpha 23 сен. 2013, в 16:06

0

Вы можете поставить в очередь:

$("#thumbs div").mouseenter(function() {
  $(this).delay(300).queue(function(next){
    $('#thumbs div').removeClass('hovered');
    $(this).addClass('hovered');
    next();
  });
});

Вероятно, вы захотите отменить его/очистить очередь, если мышь уйдет с чем-то вроде http://api.jquery.com/clearQueue/.

hiattp 23 сен. 2013, в 15:57

Ещё вопросы

Задержка jQuery работает только в очереди FX, то есть анимации, а не другими методами.
Ну, я не был уверен в этом, поэтому я также добавил второй вариант. Я отредактирую

Gurminder Singh · Accepted Answer · 2013-09-23T15-12-00.000Z

Попробуй это:

 $("#thumbs div").mouseenter(function() {   
      $(this).removeClass('hovered');
      setTimeout("addClassCustom", 300);
 });

 function addClassCustom() {
      $("#thumbs div").addClass('hovered');
 }