使用Javascript的Hover上的CSS动画

Question

我需要一个CSS动画播放向前一次，在鼠标进入和反向播放一次，当鼠标离开某个div。我有一个JsFiddle here。

我需要class=".item“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 animate