jquery - スライドアニメーション、完全に機能していません

Question

http://jsfiddle.net/UhNHW/

小さなブロック内の既存のコンテンツの背後にカラー ブロックをスライドさせようとしています。問題があり、同じページの複数のインスタンスで機能させる必要があります。

どんな助けでも大歓迎です。

Answer 1

mouseenterとmouseleaveの代わりにmouseoverとを使用しmouseoutます。

mouseoutカーソルが親 div の別の子要素に入るとトリガーされます。

Answer 2

これは、あなたの望むことですか？

http://jsfiddle.net/UhNHW/20/

.box2私は基本的にアニメーション化されているかどうかのチェックを追加します。

$(function() {
    $('.container').on('mouseenter', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 0
        }, 150);
    });
    $('.container').on('mouseleave', function() {
        var box = $(this).find('.box2');
        if(box.is(':animated')) return false;
        box.stop(true, true).animate({
            top: 40
        }, 150);
    });
});​

Answer 3

このようにマウスの休暇を使用します

   $('.container')
       .mouseover(function (){
            $('.box2').stop(true, true).animate({top:0}, 150);
       })
       .mouseleave(function (){
            $('.box2').stop(true, true).animate({top:40}, 150);
       })
       ;

より多くのインスタンスについては、これを試してください

  $('.container').each(function() {
      var c = $(this);
      var box = c.find('.box2');

      c.          
          mouseover(function (){
            box.stop(true, true).animate({top:0}, 150);
          })
          .mouseleave(function (){
            box.stop(true, true).animate({top:40}, 150);
          });
  });