jquery의 애니메이션 방법을 사용하여 div를 앞뒤로 움직이게하는 방법

Question

div를 특정 영역 내에서 앞뒤로 수평으로 움직이기를 원합니다. 지금 당장 가지고있는 문제는 그것이 앞으로 나아간 후에 어떻게 나의 div 이동을 되돌릴 수 있는지 알 수 없다는 것입니다.

<script type="text/javascript"> 
    var animatethis = function (targetElement, speed) { 
     $(targetElement).animate(
      { 
       marginLeft: "+=250px" 
      }, 
      { 
       duration: speed, 
       complete: function() { 
        animatethis(this, speed); 
        animatethis.stop(); 
        $(targetElement).animate({ marginLeft: "-=250px" }); 
       } 
      } 
        ) 
    }; 
    animatethis($('#q1'), 5000); 
</script> 

Answer 1

봐 여기

은 내가 사용하고있는 스크립트입니다. animatethis 라인

animatethis.stop(); 

항상 충돌하는 것입니다 즉, 아무것도 반환하지 않습니다 (같은 것을 "형식 오류 : 정의되지 않은 방법 '스톱'을 호출 할 수 없습니다"). complete 콜백에서 애니메이션의 순서를 뒤섞고 있습니다.

숨을 쉬고 위의 코드가 실제로하는 일에 대해 생각해보십시오.

---

좋아

때문에 marginLeft이 증가 후, 당신은 그것을 감소합니다. 다음에을 다시 시작하고 싶습니다. 권리? 따라서 :

function animatethis(targetElement, speed) { 
    $(targetElement).animate({ marginLeft: "+=250px"}, 
    { 
     duration: speed, 
     complete: function() 
     { 
      targetElement.animate({ marginLeft: "-=250px" }, 
      { 
       duration: speed, 
       complete: function() 
       { 
        animatethis(targetElement, speed); 
       } 
      }); 
     } 
    }); 
}; 

animatethis($('#q1'), 5000); 

이 고양이를 껍질을 벗기는 방법은 많이 있지만 작동하지 않습니다. http://jsfiddle.net/mattball/rKu6Y/

Answer 2

사용 jQuery를 queue() 방법을 체인 이벤트 : 브라우저 콘솔에서 http://api.jquery.com/queue/

Answer 3

시도 하시겠습니까? http://jsfiddle.net/vwH6R/2/

setInterval(function(){ 
    $("div").stop(true,true).animate({left: 300}, 1000, 
      function(){ $(this).stop(true,true).animate({left: 0}, 1000); 
    }); 
}, 2000);​ 

Answer 4

시도 this 바이올린

HTML

<div class="myDiv">A Div</div>​ 

JS

$('.myDiv').animate({ 
    'margin-left':'50px' 
}, 500, function(e){ 
$('.myDiv').animate({ 
    'margin-left':'0px' 
}, 500)});​ 

Answer 5

당신이 N에 대한 앞뒤로 이동하려는 경우 시간, 당신은 그것을 스스로를 호출하는 함수로 감쌀 수 있습니다. 다음과 같은 것 :

function wobble(selector, amount, times, intSpeed) { 

    var string = String($(selector).css("marginLeft")).replace("px", ""), 
    leftMargin = parseInt(string, 10); 

    $(selector).animate({ marginLeft: (leftMargin + amount) + 'px' }, intSpeed, function() { 
     if (times > 0) { 
      wobble(selector, -amount, --times, intSpeed); 
     } else { 
      $(selector).css("marginLeft", leftMargin + 'px'); 
     } 
    }); 
}