在鼠标悬停时使用jQuery向下移动图标

Move icon down on hover with jQuery

本文关键字：移动 图标 jQuery 鼠标 悬停      更新时间：2023-09-26

我的页面上有一个图标，我想用jQuery把它的位置动画一下。这将在悬停时发生。向下移动40px

当我关闭悬停时，它会慢慢移动到原来的位置。

<i class="fa fa-chevron-circle-down"></i>

演示:http://jsfiddle.net/5uamyea1

为什么不直接使用CSS呢?

https://jsfiddle.net/5uamyea1/

.fa{position:relative;transition:top 0.5s;top:0}
.fa:hover{top:20px}

$( '.fa-chevron-circle-down' ).hover(
  function() {
    $( this ).addClass( 'hover' );
  }, function() {
    $( this ).removeClass( 'hover' );
  }
);

，你可以在css中做动画。否则用jquery animate

替换这些行

试试下一个例子:
[JSFiddle] [1] 

[1]: http://jsfiddle.net/5uamyea1/3/

你不需要使用JQuery, CSS的过渡属性会做到这一点。更新了小提琴

    .fa-chevron-circle-down{
          transition: 1s ease-in-out;
     }
    .fa-chevron-circle-down:hover{
          transform: translate(0px,40px);
     }
相关文章：