jQuery 뷰포트 맨 위로 애니메이션

Question

페이지 상단에 고정 막대가 있고 그 안에 바구니가있는 전자 상거래 웹 사이트의 제품 페이지를 만듭니다. 페이지에는 많은 항목이 있으므로 '바구니에 추가'버튼이 많이 있습니다.

고정 막대에서 바구니까지 날아가려면 바구니에 추가 버튼이 필요합니다. 현재로서는 상자를 클릭 할 때 필요한 위치에 표시되도록 설정했지만 애니메이션과의 전환은 없습니다. 나는 객체를 position:fixed;으로 돌리고 있다는 사실을 짐작할 수 있습니다.

여기 내가 지금까지 얻은 것의 피들입니다. 희망을 도울 수 있기를 바랍니다.

$('.addToCart').click(function(){ 
    $(this).css('position','fixed'); 
    $(this).animate({ 
     top: '0px', 
     right:'0px' 
    }, "slow"); 

}); 

Answer 1

내가 여기 당신을 위해 작업 버전 http://jsfiddle.net/ZET98/

내가 margin-top과에서 위치를 변경되었습니다 않은 한 무엇을 margin-left to top 및 right

또한 부모님이 클릭했을 때 애니메이션을 적용하도록 자바 스크립트를 변경하고 top css 값

$(".addToCart").parent() 
.click(function() { 
    $(this) 
    .css({ 
     position:'fixed', 
     top: $(this).offset().top - $(window).scrollTop()+'px' 
    }) 
    .animate({ 
    right: $(this).children('.addToCart').outerWidth()+'px', 
    top:"0", 
    }); 
}); 

Answer 2

http://jsfiddle.net/d7tHU/

나는 당신이 원하는 것은이 ' http://jsfiddle.net/d7tHU/11/'것 같다.

$('.addToCart').click(function(){ 
    $(this).css('position','absolute'); 
    $(this).animate({ 
     top: -$(this).offset().top+'px', 
     left: ($('#basket').offset().left - $('#basket').width()) +'px' 
    }, "slow", function(){ 
     $(this).hide().appendTo('#basket') 
      .css({position:'static', float:'right'}) 
      .fadeIn() 
      .off('click'); 
     $('.price').html(parseFloat($('.price').html())+12.5); 
    });  
}); 

html로 약간 모드 :

<div id='header'> 
    <div id='basket'> 
     <span style="padding-right:10px">Price: <span class="price">0</span>€</span> 
    </div> 
</div> 

Answer 3

나는이 옳은 방향으로 당신을 보낼 수 있습니다 생각합니다. 그건 당신이 즉 $(".addToCart").parent(),

또한

스크립트가 왼쪽 위치, 즉 변화,하지만 당신은 margin-을 이동하려는 것입니다과 같이 내부 사업부를 대상으로하는

http://jsfiddle.net/y7W4N/12/

는, 부모를 대상으로 그래서 그냥이 더 나은 등 왼쪽 상단

편집 더 나은 버전 http://jsfiddle.net/b5Uux/ < -wrong 링크 작업 ... 왼쪽

,

http://jsfiddle.net/b5Uux/1/

Answer 4

transition 속성을 사용하여 자바 스크립트에 덜 의존이있는 CSS 솔루션 : http://jsfiddle.net/d7tHU/10/