CODEWITHSUNDEEP
jqueryjquery-animateeffect
Reteras Remus
Reteras Remus

Reputation: 933

jquery - animate?

Currently I'm developing a web shop, and I want to make an animation. When a user hits the button "Add to cart" I want to add the product to the cart (image goes directly to the cart animation). I tried with a jquery function, but it's too slow.

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

the $("#cart-image") is a 120x120 image, position absolute and opacity 0.5.

The script is working, it's going directly to the cart, but it's too slow. It takes too long, 4 or 5 seconds. I want something like a jump effect. Is this possible?

Upvotes: 1

Views: 479

Answers (3)

user3415023
user3415023

Reputation:

Try this One..it is superb..

Download Min Files

Min File(http://1drv.ms/1klFi78)

Cart File(http://1drv.ms/1klFtiZ)

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

Upvotes: 0

markz
markz

Reputation: 1766

You're doing it wrong. The animate method itself is used for animation, you don't need additional intervals. Just move the #cart-image item to the desired position, in this case top 100px, left 100px

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

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Move it by more than one pixel at a time.

Upvotes: 0

Related Questions