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

否则，您可以添加mouseout()处理程序，以便在mousenter()中添加类后更改类。

Animate.css动画无法正常工作

1 个答案: