स्लाइडर प्लगइन की तरह jQuery डोमिनोज़

Question

मैं एक jQuery- आधारित सामग्री स्लाइडर प्लगइन देख रहा हूँ। मेरा मतलब यह नहीं है कि this (जिसमें से बहुत अधिक हैं) और न ही jQueryUI slider। जो मैं खोज रहा हूं उसे चित्र में वर्णित किया जा सकता है।

क्या कोई jQuery प्लगइन है जो मुझे व्यूपोर्ट से कुछ तत्वों को स्लाइड (या संक्रमण) करने और अपने तत्वों में नए तत्वों को स्लाइड करने की अनुमति देता है? आदर्श रूप से, मैं दूसरे तत्वों के बजाय एक से अधिक तत्वों (पृष्ठ की तरह) श्रृंखला में कई तत्वों को आसानी से कम करने में सक्षम होना चाहता हूं। इन तत्वों को एक रैखिक गति से स्लाइड करने की बजाय उन्हें कम करने की क्षमता, शानदार होगी।

इस तस्वीर सबसे अच्छा दृश्य मैं के साथ आ सकता है:

मुझे पता है कि मैंने पहले कई किया है मैं, एक प्लगइन विकसित कर सकता है, लेकिन मैं पहिया पुनर्रचना से बचने के लिए चाहते हैं, अगर संभव हो तो। क्या कोई प्लगइन सुझा सकता है?

आपके समय के लिए धन्यवाद।

Answer 1

यदि आप CSS3 का समर्थन कर रहे हैं, तो आप ऐसा कुछ करने का प्रयास कर सकते हैं, एल्बियट एनीमेशन कक्षा बनाने के लिए बेहतर हो सकता है।

.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; 
}​ 

आप jQuery का उपयोग करना चाहते हैं, तो मैं जो आप एक अधिक जटिल श्रृंखलित एनीमेशन शिल्प के लिए अनुमति होगी http://api.jquery.com/queue/ साथ कुछ सफलता मिली है। बच्चों की अज्ञात संख्या के लिए आप slice() विधि का उपयोग कर सकते हैं।

मैं 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')) 

पर पाया स्वयं को क्रियान्वित करने कोड के इस स्निपेट बदल दिया है आप fadeOut उपयोग करने के लिए नहीं है और यह आत्म को क्रियान्वित करने की आवश्यकता नहीं है, लेकिन यह साफ सुथरा है अज्ञात संख्या में तत्वों को 'संक्रमण' लागू करने का तरीका।

यहाँ fadeOut http://jsfiddle.net/NpBfJ/ का उपयोग कर एक बेला है ... यह शायद अधिक काम है की तुलना में आप चाहते हैं ... :-)

स्लाइडर्स के संबंध में, यह सबसे अच्छा मुक्त लोगों में से एक वहाँ बाहर http://caroufredsel.dev7studios.com/ यह कई गया है अनुकूलन विशेषताएं।