Animate.css动画不工作

Question

我目前使用的是Animate.css框架。我想做一个我已经创建的小条，当我每次悬停在图像上时，它可以简单地在页面上移动几个像素。以下是图像和小条形图的代码：

<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>

栏的Css：

.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);
            });
        }); 

另外，在mousenter()中添加类之后，还可以添加mouseout()处理程序来更改类。