jQuery動畫到視口頂部

Question

我正在為電子商務網站創建一個產品頁面，該網站的頁面頂部有一個固定的欄，其中有一個籃子。 頁面上有很多項目，因此有很多“添加到購物籃”按鈕。

我需要添加到籃子按鈕飛到固定欄上的籃子。 目前，我已經設法讓盒子顯示在我點擊時需要它出現的位置，但是動畫沒有任何轉換。 我猜這可能是因為我正在將物體轉變為一個position:fixed; 。

這是我到目前為止的一個小提琴..希望你能幫忙！

http://jsfiddle.net/d7tHU/

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

});

Answer 1

一個使用transition屬性的CSS解決方案，對JavaScript的依賴性較小： http ： //jsfiddle.net/d7tHU/10/

Answer 2

我想你想要的是' 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小mod：

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

Answer 3

我想這可能會讓你朝着正確的方向前進。

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

你的目標是內部div，目標是父你想要移動的東西，即$( ".addToCart").parent() ，

你的腳本也在改變位置，即左邊，但你有左邊距...所以只需要在左上角等工作。

編輯更好的版本http://jsfiddle.net/b5Uux/ <-wrong鏈接這是更好的

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

Answer 4

我在這里有一個工作版本http://jsfiddle.net/ZET98/

我所做的是改變了從margin-top和margin-left到top和right

我還更改了您的javascript以動畫單擊父級時的動畫並更新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",
  });
});