CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
MAX POWER
MAX POWER

Reputation: 5448

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?

Upvotes: 1

Views: 649

Answers (1)

Observer
Observer

Reputation: 3706

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

Upvotes: 1

Related Questions