Jquery를 사용하여 선택한 항목 만 애니메이션으로 처리합니다.

Question

안녕하세요 저는 같은 블록을 3 번 반복 했으므로 다른 블록이 아니라 움직이는 블록을 애니메이션으로 처리하고 싶습니다. 아래의 스크립트는 모든 블록을 움직입니다. jquery "this"를 사용하여 붙인 div에 애니메이션을 적용하는 방법은 무엇입니까? 그리고 .img 클래스도 있습니다.

$(document).ready(function() { 
    $(".HomeClaimWrapper").hover(function() { 
    $(".HomeClaimWrapper .img").stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper").mouseout(function() { 
    $(".HomeClaimWrapper .img").stop().animate({ 
     top: "-5px" 
    }, 300); 
    }); 
}); 

Answer 1

당신이 사용하려면이

$(document).ready(function(){ 
    $.each($(".HomeClaimWrapper .img").hover(function(){ 
     $(this).stop().animate({ 
     top: "-10px" 
     }, 300); 
    }); 

    $.each($(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
}); 

Answer 2

그냥 이벤트 핸들러 내에서 선택으로 this를 사용

$(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
     $(this).stop().animate({ 
      top: "-10px" 
     }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
}); 

Answer 3

등이 바인드 이벤트처럼 할 수 this :

$(document).ready(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
    $(this).stop().animate({ 
     top: "-10px" 
     }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
}); 

.img에주의하십시오. 코드에 class="img"이 표시되지 않으면 .을 삭제하고 img으로 두십시오.

Answer 4

사용이

$(document).ready(function(){ 
    $(".HomeClaimWrapper .img").hover(function(){ 
    $(this).stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper .img").mouseout(function(){ 
     $(this).stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
}); 

편집 :는 $ 대체 div

$(document).ready(function(){ 
    $(".HomeClaimWrapper").hover(function(){ 
    $(this).find(".img").stop().animate({ 
     top: "-10px" 
    }, 300); 
    }); 

    $(".HomeClaimWrapper").mouseout(function(){ 
     $(this).find(".img").stop().animate({ 
     top: "-5px" 
     }, 300); 
    }); 
}); 

Answer 5

의 호버에 img 애니메이션 ('HomeClaimWrapper .IMG.') $ (이)

Answer 6

와 필자는 개인적으로 내 주 정의를 한 곳에서 유지하고자하며 최신 버전의 jQuery를 사용하면 마우스 오버 이벤트에 쉽게 적용 할 수 있습니다.

그런데, 현재의 단일 매개 변수 정의, 즉

$(function(){ 
    $(".HomeClaimWrapper .img").hover(function(e){ 
     $(this).stop().animate({ 
      top: e.type == 'mouseenter' ? "-10px" : "-5px" 
     }, 300); 
    }); 
}); 

, 그래서 나는 당신 (그리고 여기에 다른 답변) 샘플 당신이 원하는 꽤 무엇을하지 않을 것이라 생각합니다. 그것은 마우스 입력과 나가기 양쪽에서 트리거됩니다.

별도로 지정하려는 경우 두 가지 매개 변수 버전의 호버가 있습니다.