2013-02-22 2 views
0

jQuery를 사용하여 페이지 전체에 걸쳐 구름을 움직이려고하고 멀리 왼쪽으로 이동하면 페이지 끝으로 이동하려고합니다. jQuery this() loop issues

<div class="sprite cloud" id="cloud-1"> </div> 

 

$(function() { 
    function runIt() { 

    $(".cloud").each(function(){ 

     var speed = 20; 
     var Position = this.position().left; 
     var Width = this.width(); 
     if((Position + Width) < 0) 
     { 
      Position = $(document).width(); 
      this.css("left", Position); 
     } 

    }); 

    $('#clouds').animate({"left": Position-speed},1000, "linear", runIt)} 
    runIt(); 
}); 

나는 $를 사용하는 경우 작동

('# 구름-1'), 등,하지만 내가 사용하려고하면 각(). 나는

개체 번호가있는 방법 '위치'

내가 오프셋으로, 모든 기능에 대해 동일한 오류를() 없습니다라는 오류가 발생합니다.

$ (this)이 문제가 해결되었습니다.

새로운 코드 : 그것은 단지 지금은 한 번에 애니메이션

$(function() { 
    function runIt() { 

    $(".cloud").each(function(){ 

    var speed = 20; 
    var cloudPosition = $(this).position().left; 
    var cloudWidth = $(this).width(); 

    if((cloudPosition + cloudWidth) < 0) 
    { 
     cloudPosition = $(document).width(); 
     $(this).css("left", cloudPosition); 
    } 

    $(this).animate({"left": cloudPosition-speed},1000, "linear", runIt) 

    }); 


} 

    setInterval(runIt, 1000) 
}); 

. 그것은 runIt 콜백이 이제 루프 안에 있기 때문이라고 가정합니다. 루프 외부로 옮겨 보았지만 작동하지 않았습니다. 아마

답변

4

.position을 할 수있는 적절한 방법이 아닌 jQuery를 개체에 대한 방법이며, each 내부 this는 DOM 개체 비록 사용하여 setInterval은 확인을 작동합니다.

당신은 $(this).position

그리고 같은 width과 그것을 더 많거나 적은이었다

+0

css를 사용해야합니다! 그것은 더 이상 반복되지 않습니다. 어떤 아이디어? – evandentremont

+0

@EPICWebDesign, 전체 코드를 게시 할 수 있습니까? – Dogbert

+0

거기에 있습니다. 테스트 사이트 : http://dev.napkinworks.ca/snowislandedu/ – evandentremont