文章/答案/技术大牛

发布

问jquery - animate？
EN

Stack Overflow用户

提问于 2012-09-22 02:16:44

回答 3查看 465关注 0票数 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秒。我想要一些类似跳跃效果的东西。这个是可能的吗？

jquery

jquery-animate

effect

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-09-22 02:20:29

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

$("#cart-image").animate({
  "left" : "100px",
  "top" : "100px"
}, 500);

票数 4

Stack Overflow用户

发布于 2012-09-22 02:18:38

一次移动一个以上的像素。

票数 0

Stack Overflow用户

发布于 2014-03-13 19:22:08

试试这个One..it很棒..

下载最小文件

最小文件(http://1drv.ms/1klFi78)

购物车文件(http://1drv.ms/1klFtiZ)

编辑: Rahul

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12535993

复制

相似问题

问jquery - animate？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery - animate？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery - animate？
EN