Jquery를 사용하면 CSS의 왼쪽 값을 요소의 너비에 맞 춥니 다.

Question

Jquery animate 함수를 사용하여 부모 div를 기준으로 절대 div를 이동해야합니다. CSS 오브젝트 리터럴 left + = -600px를 어떻게 제한하여 폭의 끝에 도달하면 왼쪽 위치 지정이 멈출까요? 즉, 요소의 왼쪽 위치를 제한하여 페이지에서 벗어나 보이지 않게합니다. 도움을 주셔서 감사합니다

Answer 1

글쎄, 내 유일한 추측은 jQuery의 애니메이션 기능이 어떻게 작동하는지 오해 한 것입니다. 실제로 jQuery의 애니메이션 기능은 원하는대로 정확하게 수행합니다. 원하는 요소의 속성을 원하는만큼 증가시킵니다. 즉, 원한다면 페이지에서 벗어나 보이지 않게 이동합니다. Here은 어떻게 작동하는지 읽습니다.

Answer 2

$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]); 

아니면 요소 자신의 폭을 의미하는 경우 :

$(this).animate({'left': '-'+$(this).width()}, [time in ms]); 

Answer 3

당신은 jQuery를 animate의 step α- 함수는 요소가 페이지의 가장자리에 도달했는지 각 단계에서 확인하는 데 사용할 수있는 및 중지해야합니다. 은 제한에 도달했을 때 단계 기능을 사용하여 애니메이션을 중지하는 방법을 보여주는 바이올린입니다.

...animate({left: '+=-600px'}, 
    { 
    ... , 
    step: function(now, fx) { 
     if (fx.now <= 0) { // If the current animation value is less than zero 
     $(fx.elem).stop(); 
     $(fx.elem).style('left', '0'); 
     } 
    } 
    ... 
    } 
); 

스텝 기능을 사용하면 필요한 경우 단계별로 애니메이션을 단계적으로 제어 할 수 있습니다. 자세한 내용은 here을 읽으십시오.

$(document).ready(function(){ 
var childWidth = $('#child').width(); 
var parWidth = $('#child').parents('#parent').width(); 
var offSet = parWidth - childWidth; 

$('#child').animate({ 
    left: '+=' + offSet 
}, 1000); 

}); 

예 HTML :

Answer 4

당신과 같이, 부모 폭에서 자식 폭을 빼기해야합니다, 그것은 부모 내에서 줄을 유지하려면

<div id="parent"> 
    <div id="child"> 
     I've been a bad child. 
    </div>  
</div> 

CSS :

데모 용으로는

* { 
    margin: 0; 
    padding: 0; 
} 
#parent { 
    width: 600px; 
    height: 200px; 
    background: green; 
    position: relative; 
} 

#child { 
    position: absolute; 
    background: red; 
    width: 100px; 
    height: 200px;   
} 

See this JSFiddle입니다.