각 클릭에 애니메이션 배경 위치 이동

Question

사진 포트폴리오 테마를 개발 중이며 사이트의 기능에 jQuery를 작성하는 동안 약간의 장애가 있습니다. 내가 달성하고자하는 것은 이전과 다음 아이콘을 클릭 할 때마다 축소판 그림의 인라인 목록이 왼쪽 또는 오른쪽으로 110px (단일 축소판의 너비)로 움직 이도록하는 것입니다.

$('.next').each(
    function(){ 
     $(this).bind (
      "click", 
      function(event){ 
       $('#thumbnailGallery ul').animate(
        {left:-110}, { 
         duration:'fast', 
         easing:'easeInSine' 
       }); 
      } 
     ); 
    } 
); 

$('.prev').each(
    function(){ 
     $(this).bind (
      "click", 
      function(event){ 
       $('#thumbnailGallery ul').animate(
        {left:110}, { 
         duration:'fast', 
         easing:'easeInSine' 
       }); 
      } 
     ); 
    } 
); 

현재 .each(); onClick을 사용하여 애니메이션을 바인딩하지만 애니메이션은 한 번만 발생합니다. 예를 들어 .next를 클릭하면 -110 픽셀의 애니메이션이 적용되지만 다시 클릭하면 그렇지 않습니다. .prev에서도 마찬가지입니다.

Answer 1

대신을 시도해보십시오

$('.next').each(
    function(){ 
     $(this).bind (
      "click", 
      function(event){ 
       $('#thumbnailGallery ul').animate(
        {left:"-=110px"}, { 
         duration:'fast', 
         easing:'easeInSine' 
       }); 
      } 
     ); 
    } 
); 

$('.prev').each(
    function(){ 
     $(this).bind (
      "click", 
      function(event){ 
       $('#thumbnailGallery ul').animate(
        {left:"+=110px"}, { 
         duration:'fast', 
         easing:'easeInSine' 
       }); 
      } 
     ); 
    } 
); 

는