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

변경에게 길을 도울 수, 이것에 클래스의 두 번째 호출, 그것이 작동하는 경우이 말해보십시오, 특정 요소에 실행됩니다 이런 식으로 변경 식사 기능은 마우스의 설정은 그것이 당신의 조언을

Answer 2

어떤 시점에서 사용하려는 easing 유형 (easeInCubic)을 포함하고 있습니까? 에 따르면 : "out-of-the-box"값은 "스윙"과 "선형"이어야합니다. (내 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' 
    }); 

} 

});`

나는 내가 ANIM 당신이 더