Мигание всплывающего окна на jquery

Question

Я большой новичок в этом деле, поэтому подскажите, почему в данном коде мигает окно при его наведении, я не хочу наоборот этого

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>                                                                  
<head>      
<style type="text/css">
p
{
border:1px solid;
}
</style>                                                          
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">   
$(document).ready(function(){

   $("p").mouseover(function(){ $("p").fadeTo(2000,1);});
   $("p").mouseout(function(){ $("p").fadeTo(2000,0.3);});

});                                           
</script>
                                                          
</head>
<body> 
<p>Наведите на меня курсор мыши и я изменю цвет. Когда Вы выведите курсор мыши за мои пределы я изменю цвет на стандартный.</p>
</body>
</html>

Answer 1

Ну код не учитывает, что границу элемента можно пересекать по несколько раз, и до завершения предыдущей анимации. Вот он и выполняет всё, что многократно запустилось. Надо научиться как-то останавливать предыдущую анимацию. А в jQuery есть для этого готовая функция .stop()

$(document).ready(function(){
  $("p").mouseover(function(){
    // this ссылается на объект, в контексте которого вызвана функция.
    // в данном случае - <p>. Это чтобы заново по странице его не искать.
    $(this).stop(true).fadeTo(2000, 1);
  });
  
  $("p").mouseout(function(){
    $(this).stop(true).fadeTo(2000, 0.3);
  });
});

p {
  border:1px solid;
  opacity: 0.5;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<p>Наведите на меня курсор мыши и я изменю цвет. Когда Вы выведите курсор мыши за мои пределы я изменю цвет на стандартный.</p>

БЛОГ НА HUSL

Мигание всплывающего окна на jquery

Ответы (1 шт):