使用Javascript悬停的CSS动画

Question

当鼠标离开某个div时，我需要一个CSS动画在鼠标输入时向前播放一次并反向播放。 我这里有一个JsFiddle。

我需要class =“。item”div才能触发鼠标输入的div。 “动画”实际上是每条红线都有的4种不同的动画。 每条红线也是“.line”css类的一部分，所以我只是通过修改“.line”类来告诉所有动画。 谢谢

Answer 1

以下是如何使用带有jquery动画的mouseenter和mouseleave的示例。

HTML

<div class="container">
    <div class="divToAnimate">
        <p>test</p>
    </div>
</div>

JS

$(document).ready(function(){
   $(".divToAnimate").mouseenter(function(){
    $(".divToAnimate").animate({left:'50px'});
  });
  $(".divToAnimate").mouseleave(function(){
    $(".divToAnimate").animate({left:'0px'});
  });
});

CSS

.container{
    background-color: green;
    height: 200px;
    width: 200px;
    float: left;
    position: relative;
}

.divToAnimate{
    height: 150px;
    width: 150px;
    background-color: red;
    position: relative;
}

您也可以使用animate功能编辑css。

jquery动画