Hi all,
I need to animate shopping cart images from a listing page into a set position (basket) on the top right of the page. (A fly to effect if you will so people can see the item going into the basket)
I have only ever used set vales for animate so Im not sure where to start. Obviosuly each image/product clicked will need a different x/y value for it to animate into the basket.
Any help or pointers would be much appreciated.
A.
Hi ,
I have a same question earlier , try to play around with the following code by chaning height , width to a different values.
$(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
});
});
});
});
});
Actually, if you set the position to absolute, then animate it to wherever the basket appears on the page, it should be pretty easy.
Say you had a list of products
<li>
<h3>Product Title</h3>
<p class="desc">Lorem ipsum...</p>
<a class="add" href="#>add to basket</a>
</li>
You could make the product ready to be added to the basket, by removing some of the properties first and setting it's position to absolute.
$("#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);
});
This hasn't been tested but the idea is that once we click on a product, we'll move that product to the body, set it's position to absolute, and use it's offset coordinates to make sure the product doesn't jump to the next relative element. We then get the offset coordinates of the #cart and animate it to that position. You might need to tweak these values to get the desired effect.
The other option of this is to actually clone the product before animating it (hiding it's original) which would make sure that if a user removes it from the cart, you can literally just remove it from the DOM using remove() and then just enable the original product.
Have a look at the different easing options available and use the one you like the most. All of these can be applied to the .animate() method of jQuery.
Hope this helps and I'd love to see the finished product :)
Regards,
Marko