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

Question

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

当我停止时，它会慢慢移回原来的位置。

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

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

Answer 1

为什么不用CSS？

https://jsfiddle.net/5uamyea1/

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

Answer 2

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

你可以用css做动画。否则用jquery animate替换这些行

Answer 3

尝试下一个例子：
[的jsfiddle] [1]

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

Answer 4

你不需要使用JQuery，CSS转换属性会这样做。更新了fiddle

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