使用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 transition屬性可以做到這一點。 更新了小提琴

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