클릭 애니메이션을 반복 가능하게하려고 시도합니다.

가로로 슬라이드하는 막대를 만들려고합니다. 왼쪽에 위치하면 오른쪽으로 움직입니다. 위치가 맞으면 왼쪽으로 움직입니다. 결국에는 여러 개의 막대가 나란히 표시되어 다른 이미지를 드러내지 않게됩니다.클릭 애니메이션을 반복 가능하게하려고 시도합니다.

지금은 두 번 이상 발사하는 방법을 알아낼 수 없다는 점만 제외하면 괜찮습니다. 나는 상상력의 스트레칭으로 자바 스크립트 녀석이 아니므로 올바른 방향으로 조금만 밀어 주시면 감사하겠습니다.

감사
누가 복음

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="jquery.js"></script> 
    <script> 
    var x=1; 
    $(document).ready(function(){ 
     if(x==1) 
     { 
     x=2; 
     $("#block").click(function() 
     { 
      $("#block").animate({right:'20px'}); 
     }); 
     return; 
     } 

     if(x==2) 
     { 
     x=1; 
     $("#block").click(function() 
     { 
      $("#block").animate({left:'20px'}); 
     }); 
     return; 
     } 


    }); 
    </script> 
    </head> 



    <body> 

    <p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p> 

    <div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;"> 
    </div> 

    </body> 
    </html>

출처

2012-11-14 Luke Pighetti

바인딩하여 경우 한 Statment 밖으로 이벤트 및 부대 행사의 조건을 넣어.

$(document).ready(function(){ 
    var x=1;   
    $("#block").click(function() 
    { 
     if(x==1) 
     { 
      x=2; 
      $("#block").animate({right:'20px'}); 
     } 
     else 
     { 
      x=1; 
      $("#block").animate({left:'20px'}); 
     } 
    }); 
});

Live Demo는

Live Demo

$(document).ready(function() { 
    var x = 1; 
    $("#block").click(function() { 
     if (x == 1) { 
      x = 2; 
      $("#block").animate({ 
       right: '20px', 
       left: '0px' 
      }); 
     } 
     else { 
      x = 1; 
      $("#block").animate({ 
       left: '20px', 
       right: '0px' 
      }); 
     } 
    }); 
});

출처

2012-11-14 14:47:16 Adil

두 번 클릭 한 후 요소는'CSS 규칙 left', 그것은 더 이상'right' 모두 업데이트되지 않습니다됩니다. – pimvdb

@pimvdb - 동의합니다 –

감사합니다 @ pimvdb, 주기적으로 내 대답을 업데이트했습니다. – Adil

아래에 주어진처럼 당신은 쉽게 애니메이션을 할 수없는 코드를 변경해야 할 수도 규칙주기를 유지하기 위해 left 및 right인데, left: 0을 right: 0으로 변경하면 jQuery가 정확한 끝 위치를 알지 못하기 때문입니다. 당신이 할 수있는 것은 이것을 직접 계산하고 left만을 사용하는 것입니다. 몇 가지 다른 사항은 다음과 같습니다

대신
이 결합하는 어떤 이벤트 핸들러를 결정하지 마십시오 다수의 플립 부울를 사용하지만 처리기가에 대한
사용 $(this)를 호출 할 때 어떻게해야하는지 결정 현재 요소

http://jsfiddle.net/HZRWJ/

$(document).ready(function(){ 
    var isLeft = true; 
    $("#block").click(function() { 
     var fullWidth = $(document).width(); 
     var elemWidth = $(this).width(); 
     if(isLeft) { 
      $(this).animate({ left: fullWidth - elemWidth }); 
     } else { 
      $(this).animate({ left: 0 }); 
     } 
     isLeft = !isLeft; 
    }); 
});

출처

2012-11-14 14:54:24 pimvdb

이 작업을 수행합니다 당신이 원했던 것과 비슷한 것을하십시오?

$("#block").data('position', 'left'); 
$("#block").click(function() { 
    var elem = $(this); 
    resetElementPosition(elem); 
    switch (elem.data('position')) { 
     case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break; 
     case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break; 
     } 
}); 

function resetElementPosition(element) 
{ 
    element.css({ 'left' : 'auto', 'right' : 'auto' }); 
}

출처

2012-11-14 15:00:55

Fiddle Demo

당신이 JQuery와 객체에 값을 저장하는 것이 더 쉬울 수 있습니다 여러 개의 막대가하려는 경우.

$(document).ready(function(){ 

    $("#block").each(function() { 

     // associate data with each element. At the moment there should 
     // only be one but if this is implemented as a class there may 
     // be more 
     $(this).data("x", 0); 

    }); 

    $("#block").click(function() { 

     // 0 will push it to the right as 0 => false 
     if($(this).data("x")) { 

      $(this).data("x", 0); 

      // removing the css property allows you to use left & right 
      $(this).css("right","").animate({left:'20px'}); 

     } else { 

      $(this).data("x", 1); 

      $(this).css("left","").animate({right:'20px'}); 

     } 
    }); 
    });

데모 here

출처

2012-11-14 15:19:13 Bruno

클릭 애니메이션을 반복 가능하게하려고 시도합니다.

답변

관련 문제