jquery .animate () - этот код делает то, что я хочу

Question

Я пытаюсь сделать div скользящим вниз, когда мышь наводит курсор на другой div чуть выше него. По сути, div над ним - просто триггер, который заставляет div скользить вниз. При наведении курсора на .trigger расширение .slidedown расширяется, а при наведении курсора на .slidedown само скользит вверх. Вот код, который у меня есть:

$(document).ready(function() {
 $('.slidedown').hide(); 
 //When mouse rolls over
  $('.trigger').mouseover(function(){ 
   $('.slidedown').stop().animate({
   height: ['toggle', 'swing'],
  }, 600, function() {
    // Animation complete.
  });
});

    //When mouse is removed
   $('.slidedown').mouseout(function(){  
     $('.slidedown').stop().animate({
   height:'0px'
   }, 600, function() {
    // Animation complete.
  });
});
});

Это работает, но есть только два тика, с которыми мне нужна помощь. Во-первых, после того, как mouseout и div .slidedown скользят вверх и исчезают, если я снова наведу курсор мыши на div .trigger, ничего не происходит. Это должно заставить .slidedown снова опуститься. Мне это нужно, чтобы каждый раз продолжать работать. Я попытался удалить .stop (), но он все еще не работает.

Также можно ли заставить его скользить вверх, если мышь выходит из .trigger, но только если она не выходит из .trigger в .slidedown? Это так, если пользователь не перемещает мышь в .slidedown, он останется навсегда, что нехорошо. Или просто укажите ограничение по времени, в течение которого оно может оставаться расширенным, если мышь не перемещается .slidedown.

Во-вторых, есть ли способ сделать задержку около 1 секунды между мышью и делением, скользящим назад? Спасибо за вашу помощь!

Answer 1

Вы можете попробовать использовать событие jQuery hover.В качестве задержки вы можете поместить анимацию закрытия в setTimeout:

$(document).ready( function(){
  $('.trigger').hover( function(){ // enter animation

    $('.slidedown').stop(true,true).animate({
        height: ['toggle', 'swing'],
        }, 600, function() { /* animation done */ });

    }, function(){ // leave animation

    setTimeout( function(){
      $('.slidedown').stop(true,true).animate({
        height: '0px',
        }, 600, function() { /* animation done */ });
    }, 1000 );

  });
});

. Вы также можете заглянуть в плагин hoverIntent для более детального управления поведением mouseenter / mouseleave, в том числе сроки.

Answer 2

Я думаю, вы обнаружите, что установка числовой высоты в $('.trigger').mouseover() может помочь воспроизвести анимацию.К вашему сведению, вы можете установить целое число для чего-то вроде высоты или ширины в jQuery, и он автоматически установит для вас единицу измерения px.

Как указал Кен, setTimeout полезен для задержки кода, ноон в вашем событии $('.slidedown').mouseout() или в дивизионе slideown будет скрываться после наведения мыши на дивизион trigger вместо того, чтобы оставить дивизион slidedown, как вы указали.