Animate.css анимация не работает

Question

Я в настоящее время использую Animate.css Framework. Я ищу, чтобы создать небольшой бар, который я создал, чтобы просто перемещать несколько пикселей вверх по странице, когда каждый раз наводил на изображение. Вот код для изображения и небольшой бар:

<div id="GoogleBar" class="bar" style="position:fixed;bottom:5%;left:33.8%;"> 
    <center>Google +</center> 
</div> 
<a href="http://www.google.com"><img id="Google" src="css/images/Google_PlusBook.png" style="width:5.9%;height:15%;position:fixed;bottom:3.2%;left:33.2%;padding:4px;"></a> 

устанавливаемых сотовый для бара:

.bar 
{ 
    background: #000000; 
    width: 5%; 
    height: 3%; 
    color:#ffffff; 
    line-height: 150%; 
    border:1px solid #ffffff; 
    border-radius:25px;  
    font-family: Arial; 
} 

Вот код, я использую, чтобы добавить классы анимации, когда я когда-либо наведите курсор мыши на изображение:

$(document).ready(function() 
     {  
      $('#Google').hover(function() 
      {  
       $('#GoogleBar').removeClass('animated bounceInDown'); 
       $('#GoogleBar').addClass('animated bounceInUp'); 
      },  
      function() 
      {  
       $('#GoogleBar').removeClass('animated bounceInUp'); 
       $('#GoogleBar').addClass('animated bounceInDown');  
      }); 
     }); 

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

Answer 1

Попробуйте использовать функцию setTimeout(), потому что я думаю, что вы одновременно добавляете и удаляете классы, в результате чего эффект не имеет времени для вступления в силу. :

$(document).ready(function() 
     {  
      $('#Google').mouseenter(function() 
      {  
       $('#GoogleBar').removeClass('animated bounceInDown'); 
       $('#GoogleBar').addClass('animated bounceInUp'); 

       setTimeout(function() { 
        $('#GoogleBar').removeClass('animated bounceInUp'); 
        $('#GoogleBar').addClass('animated bounceInDown'); 
       },1000); 
      }); 
     }); 

Иначе вы можете добавить mouseout() обработчик изменять классы после у добавили их в mousenter().