jquery는 중앙에서부터 먼 왼쪽 또는 오른쪽으로 움직입니다 (문서 너비를 기준으로 한 화면 꺼짐)

Question

본질적으로 왼쪽 또는 오른쪽으로 화면에서 벗어나고 자하는 고정 너비 요소가 있습니다. 시각적으로 볼 수는 있지만 애니메이션을 사용합니다. 그러나 그것은 현재의 시도로 계획대로 진행되지 않습니다.

화면의 반대쪽으로 점프하여 원하는 방향으로 건너 뛰고있는 것처럼 보입니다. 그러나 내가 그것을하고 싶은 내 원하는 목표

을 달성하기 위해 사용하려고 시도하고있는 레이아웃 샘플이 될 것입니다 그것이 화면

$('.element').animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#dashboardWidgetContainer').hide().html('')}); 

을 가로 질러 갈 앉아 곳에서이다

<div id="container"> 
    <div class="element"></div> 
</div> 

Answer 1

그것을 먼저 고정 된 위치를 설정

이동 :

$el = $('.element'); 
$el.css({ 
    position: 'fixed', 
    top: $el.offset().top, 
    left: $el.offset().left 
}).animate({left:'100%'}, 1000); 

,

Answer 2

는이 같은 뭔가를 달성하기 위해 노력하고있다 :

http://jsfiddle.net/t2FxV/

Answer 3

그것은 아마도 마진이 예에서와 같이 0으로 자동에서 변경과 관련이 화면을 가로 질러 점프 경우 : http://jsfiddle.net/Paulpro/t2FxV/1/.

애니메이션을하기 전에 현재의 위치로 marginLeft을 설정해야합니다 :

$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});  

http://jsfiddle.net/Paulpro/pakCP/

jdavies은 (게시물 삭제?), 당신은 dashboardWidgetContainer을 변경해야 할 수도 있습니다 지적 스크립트가 잘 작동 존재하는 요소의 선택 자로. 한 가지주의해야 할 점은 요소를 페이지에 다시 삽입 할 계획이 없다면 .hide() .html ('')을 .remove()로 대체해야합니다. DOM에서 요소를 모두 제거하기가 훨씬 깔끔하기 때문입니다 거기에 앉아서 디스플레이와 함께 앉아있는 것보다 : 없음; 내용이 없습니다.

$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').remove()});