JQuery Domino Like Slider Plugin

Question

I am looking for a plugin for jQuery based content slider. I do not mean: this (there are too many of them), but the jQueryUI slider . What I'm looking for can best be described in the picture.

Is there a jQuery plugin that allows me to move (or navigate) certain elements from the viewport and place new elements on it? Ideally, I would like to facilitate the removal of several elements and back to the page (like a), and not one by one. The ability to lighten these elements rather than slide them at linear speed would be amazing.

This picture is the best visual I could come up with:

I know that I can develop a plugin, as I have already done a few, but I would like, if possible, to avoid inventing the wheel. Can anyone suggest a plugin?

Thank you for your time.

Answer 1

If you support CSS3, you can try to do something like this, albiet, it might be better to create an animation class.

.item:nth-child(1) { transition-timing-function : ease-in-out; transition-property : left; transition-duration : 0.1s; transition-delay : 0.35s; } item:nth-child(2) { transition-timing-function : ease-in-out; transition-property : left; transition-duration : 0.1s; transition-delay : 0.55s; } .item:nth-child(3) { transition-timing-function : ease-in-out; transition-property : left; transition-duration : 0.1s; transition-delay : 0.65s; } .item:nth-child(4) { transition-timing-function : ease-in-out; transition-property : left; transition-duration : 0.1s; transition-delay : 0.75s; }​ 

If you want to use jQuery, I had some success with http://api.jquery.com/queue/ , which will allow you to create a more complex animation chain. For an unknown number of children, you can use the slice() method.

I modified this piece of self-executing code found at http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

 (function hidenext(jq){ jq.eq(0).fadeOut("fast", function(){ (jq=jq.slice(1)).length && hidenext(jq); }); })($('div')) 

You do not need to use fadeOut , and it does not have to be executed independently, but it is a neat and tidy way to apply the "transition" to an unknown number of elements.

Here's a fiddle using fadeOut http://jsfiddle.net/NpBfJ/ ... this is probably more work than you want ... :-)

As for the sliders, this is one of the best free http://caroufredsel.dev7studios.com/ , it has many customizable features.