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）

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>
于 2014-03-13T11:22:07.697 に答える