javascript - 使用 Javascript 悬停时的 CSS 动画

Question

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

我需要将 class=".item"div 作为触发鼠标输入的那个。 “动画”实际上是每条红线都有 4 种不同的动画。每条红线也是“.line”css 类的一部分，所以我简单地告诉所有动画从修改“.line”类开始。谢谢

Answer 1

这里是一个如何使用 mouseenter 和 mouseleave 与 jquery 动画的例子。

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

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

jquery animate