Позиция мыши на загрузке страницы выбрасывает jQuery?

Question

У меня есть небольшой заголовок, который должен войти в верхнюю часть страницы, затем исчезать и перемещаться вправо.

После того, как он потускнел и справа, когда пользователь мыши над заголовком, он должен затухать и вернуться назад, чтобы отобразить дополнительную информацию.

На следующем выводе он возвращается влево и снова исчезает.

Все работает отлично, за исключением случаев, когда пользователь наводит указатель мыши на div, когда он изначально появляется на странице. Если это так, первое событие jQuery, которое запускается, является событием mouseout. И div установлен на 200 пикселей слишком далеко вправо. В принципе, полностью переместите его на страницу.

Я пытаюсь решить это с помощью setTimeout, но он не работает.

JavaScript:

<script type="text/javascript"> 
    $(document).ready(function() { 
     setTimeout(function(){ 
      $('#special_box').animate({top: '+=100'}, 300); 
     }, 2000); 
     setTimeout(function(){ 
      $('#special_box').fadeTo('slow', .3).animate({right: '-=200'}, 300); 
     }, 10000); 

     setTimeout(function(){ 
      $('#special_box').mouseover(function() { 
       $(this).fadeTo('fast', 1).animate({right: '+=200'}, 300); 
      }); 
      $('#special_box').mouseout(function(){ 
       $(this).fadeTo('fast', .3).animate({right: '-=200'}, 300); 
      }); 
     }, 12000); 
    }); 
</script> 

CSS:

.special_box {z-index: 7; 
      height: 30px; 
      width: 400px; 
      position: fixed; 
      display: block; 
      padding: 5px; 
      top:-100px; 
      right:0px;} 

HTML:

<div class="special_box" id="special_box"> 
    Hello Cleveland! 
</div> 

Answer 1

Чтобы надежно ждать начальной анимации, чтобы закончить, вы можете указать его в качестве .delay().animate().delay().fadeTo().animate().promise().then(fn) цепи, с приложением обработчиков Mouseover/MouseOut в обратном вызове fn.

В полном объеме:

$(document).ready(function() { 
    var $special_box = $('#special_box'); 
    $special_box.delay(2000).animate({top: '+=100'}, 300).delay(8000).fadeTo('slow', .3).animate({right: '-=200'}, 300).promise().then(function() { 
     $special_box.mouseover(function() { 
      $special_box.fadeTo('fast', 1).animate({right: '+=200'}, 300); 
     }); 
     $special_box.mouseout(function(){ 
      $special_box.fadeTo('fast', .3).animate({right: '-=200'}, 300); 
     }); 
    }); 
}); 

Вы могли бы также рассмотреть следующие вопросы:

• для обеспечения изображение загружается до появления начальной анимации, завернуть в $(document).load(...) вместо $(document).ready(...)
• лучше CATER для быстрых движений мыши, включают в себя .stop() как в обработчиках мышки/мышки
• для лучшего поведения, ответьте на события mouseenter/mouseleave вместо mouseover/mouseout

Answer 2

Попробуйте использовать .delay(). Это задерживает выполнение функций.

Смотрите полную документацию here.

Пример:

$(document).ready(function(){ 
    $('.example').slideUp(200).delay(1000).fadeIn(400); 
}); 

Answer 3

Вы можете использовать классы, то вы можете использовать метод .addClass().

После div анимированный на использовании нагрузки .addClass('yourClassName'); и сделать mouseover и mouseout для нового класса.

$('.yourClassName').on('mouseover',function(){ 
    // Your code here 
});