1

目前我正在开发一个网店，我想做一个动画。当用户点击“添加到购物车”按钮时，我想将产品添加到购物车（图像直接进入购物车动画）。我尝试了一个 jquery 函数，但它太慢了。

<script>
var cCount = 0;
var cId = -1;

function add_to_cart(){
   cId = setInterval(function(){ animateCart(); }, 1);


}

function animateCart(){
   $("#cart-image").animate({
   "left" : "+=1px",
   "top" : "-=1px"
   }, 1);

if(cCount >= 400)
   clearInterval(cId);

   cCount++;
}
</script>

$("#cart-image") 是 120x120 图像，绝对位置和不透明度 0.5。

该脚本正在运行，它会直接进入购物车，但它太慢了。时间太长了，4到5秒。我想要类似跳跃效果的东西。这可能吗？

4

3 回答 3

4

你这样做是错的。animate 方法本身用于动画，不需要额外的间隔。只需将#cart-image 项目移动到所需位置，在本例中为顶部 100 像素，左侧 100 像素

$("#cart-image").animate({
  "left" : "100px",
  "top" : "100px"
}, 500);
于 2012-09-21T18:20:29.247 回答
0

一次移动超过一个像素。

于 2012-09-21T18:18:37.647 回答
0

试试这个。。太棒了。。

下载最小文件

最小文件（http://1drv.ms/1klFi78）

购物车文件（http://1drv.ms/1klFtiZ）

拉胡尔编辑

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/jquery.cart.min.js"></script>

<body>

<div id="cart" style="margin-left:80%;">Cart</div>

<div><img src="your image path" class="image" width="194" height="259" /></div>

<div><input type="submit" name="cart" value="Add To Cart" id="adcrt" /></div>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

$('#adcrt').click(function()
{
    $('.image').imgMove('#cart',0.8,'150','200');
})
});
</script>
于 2014-03-13T11:22:07.697 回答