Question

我需要将列表页面中的购物车图像设置为页面右上角的设置位置（篮子）。（如果你愿意，人们可以看到物品进入篮子，那么效果就会起作用）

我只使用set vales进行动画制作，所以我不知道从哪里开始。显然，点击的每个图像/产品都需要不同的x / y值才能在篮子中生成动画。

非常感谢任何帮助或指示。

一个。

Answer 1

我之前有同样的问题，尝试通过将高度，宽度变为不同的值来使用以下代码。

$(document).ready(function() {
  $("#myimage").mouseover(function () {
    var $this = $(this);
      $this.animate({height: '+=5', width: '+=5'}, 'fast', function() {
      $this.animate({height: '-=10', width: '-=10'}, 'fast', function() {
        $this.animate({height: '+=5', width: '+=5'}, 'fast', function() {
          //animation finished
        });
      });
    });
  });
});

Answer 2

实际上，如果您将位置设置为绝对位置，然后将其设置为在页面上出现的篮子的任何位置，它应该非常简单。

假设您有产品清单

<li>
    <h3>Product Title</h3>
    <p class="desc">Lorem ipsum...</p>
    <a class="add" href="#>add to basket</a>
</li>

您可以将产品 准备好 添加到购物篮中，首先删除一些属性并将其位置设置为绝对值。

$("#products li .add").click(function() {
    // We mainly want to work with the <li> here so lets store it in a variable
    var $parent = $(this).parent();

    // get the offset of the current product
    var offset = $parent.offset();

   // let's assume we have our cart with id #cart and let's get it's offset too
   var cartOffset = $("#cart").offset();

    $parent
    // apend it to the body so that the `<body>` is our relative element
    .appendTo("body");

    // Set the product to absolute, and (hopefully) clone its' position
    .css({ 
        'position': 'absolute',
        'top': offset.top,
        'left': offset.left
    })

    // we're now ready to animate it, supplying the coordinates from the #cart
    .animate({ 
        'top': cartOffset.top,
        'left': cartOffset.left
    }, 500)

    // Then fade it out perhaps?
    .fadeOut(300); 
});

这尚未经过测试，但我们的想法是，一旦我们点击产品，我们会将该产品移动到正文，将其位置设置为绝对位置，并使用它的偏移坐标以确保产品不会跳到下一个相对元素。然后我们得到#cart的偏移坐标并将其设置为该位置的动画。您可能需要调整这些值以获得所需的效果。

另一种选择是在动画制作之前实际克隆产品（隐藏它的原始产品），这样可以确保如果用户将其从购物车中移除，您可以直接将其从DOM使用remove（）然后启用原始产品。

查看可用的不同缓和选项，并使用您最喜欢的缓动选项。所有这些都可以应用于jQuery的.animate（）方法。

希望这会有所帮助，我很乐意看到成品:)。

此致

马尔科

jQuery动画设置位置

2 个答案: