GSTAR GSTAR - 11 months ago 33
CSS Question

Move element from one parent to another with animation

I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.

When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.

When clicking the "prev" button it needs to perform the reverse animation.

When moving items from the second pile to the first, this needs to happen with an animation.

I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.

I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two

ul
elements. Also how do I ensure the items are cycled in the correct order?

Does anyone have any ideas on how I should go about this?

Answer Source

Here is a quick idea how to achieve what you want. Add this:

$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
    $(prevItem).css('zIndex', '1');

to your next button functionality.

You need to play with the code to make perfect transition. Here is an updated fiddle

Google animate function for jQuery and you will find more examples

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download