JQuery Animate - 同じクラスのすべての画像ではなく、上に乗っている画像にアニメーションを適用する方法？

Question

これは私のjQueryのコードです：

$(document).ready(function() { 

    $(".bottommrg").mouseenter(function() { 
     $(".bottommrg").animate({ 
      marginTop: '-20px' 
     }, { 
      duration: 500, 
      easing: 'easeOutCubic', 
      complete: function() { 

     $(this).animate({ 
      marginTop: '0px' 
     }, { 
      duration: 500, 
      easing: 'easeInCubic' 
     }); 

     $(this).animate({ 
      marginTop: '-10px' 
     }, { 
      duration: 300, 
      easing: 'easeInCubic' 
     }); 

     $(this).animate({ 
      marginTop: '0px' 
     }, { 
      duration: 300, 
      easing: 'easeInCubic' 
     }); 

    } 
}); 

}).mouseleave(function() { 
$("img", this).stop().css({ 
    marginTop: '0px' 
}); 
}); 

}); 

、これは例の画像です：

<img src="images/car-park.png" class="alignleft bottommrg" alt=""/> 

は、私がバイオリンを作成したが、何らかの理由でそれが動作しません。http://jsfiddle.net/FGpCP/7/

とにかく、私のアニメーションは動作しますが、同じクラスの画像にマウスを置くと、現在マウスオーバーしているものだけをアニメーション化したいときに、すべてアニメーション化されます。

idタグを使用してこれを行うことができたと思いますが、同じコードを6回設定することになります。

また、バウンス効果のようなものがありましたが、大丈夫ですが完璧ではありません。本当に高く評価するよりも見栄えを良くするための提案があれば完璧ではありません。

私は、バウンスプラグインがあることを知っていますが、私はむしろこの方法で達成したいと思います。

ありがとうございました。

Answer 1

変更を助けることができる、それが動作するかどうか、これが私に教えてみてください、これには、特定の要素上で実行されます。この方法は、クラスの2回目の呼び出しを変更関数は、それはあなたのアドバイスのための感覚

Answer 2

使用しようとしているイージングタイプ（easeInCubic）をある時点で埋め込んでいますか？によると、は、 "out-of-the-box"値は "swing"と "linear"のみである必要があります。 （私のJSコンソールによれば、Object #<Object> has no method 'easeOutCubic'も同様に問題になるかもしれません）。

参照：http://jsfiddle.net/frederikring/BHSxQ/は

Answer 3

が、私はこの私の自己を試していなかった作業が、あなたが見ることができるならば、このworks`の$（ドキュメント）.ready（関数（）{

$(".bottommrg").mouseenter(function() { 
    $(this).animate({ 
     marginTop: '-20px' 
    }, { 
     duration: 500, 
     easing: 'easeOutCubic', 
     complete: function() { 

    $(this).animate({ 
     marginTop: '0px' 
    }, { 
     duration: 500, 
     easing: 'easeInCubic' 
    }); 

    $(this).animate({ 
     marginTop: '-10px' 
    }, { 
     duration: 300, 
     easing: 'easeInCubic' 
    }); 

    $(this).animate({ 
     marginTop: '0px' 
    }, { 
     duration: 300, 
     easing: 'easeInCubic' 
    }); 

} 

}）; `

私は道アニメーションあなたにさらに