Question

我正在为电子商务网站创建一个产品页面，该网站在页面顶部有一个固定栏，其中有一个篮子。页面上有很多项目，因此有很多“添加到购物篮”按钮。

我需要添加到购物篮按钮才能飞到固定栏上的篮子。目前，我已经设法让盒子显示在我点击时需要它出现的位置，但是动画没有任何转换。我猜这可能是因为我正在将对象变成position:fixed;。

这是我到目前为止的一个小提琴..希望你能帮忙！

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

});

Answer 1

使用transition属性且对JavaScript的依赖性较低的CSS解决方案：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 little 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()，

此外，你的剧本正在改变位置，即离开，但你有左边缘......所以只需要在左上角等工作。

EDIT 更好的版本http://jsfiddle.net/b5Uux/＆lt; -wrong link这是更好的

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",
  });
});

jQuery动画到视口顶部

4 个答案: