मैं Isotope का उपयोग करना सीख रहा हूं और animate item sizes के बारे में लेखक के ब्लॉग पोस्ट में आया हूं।आइसोटोप में आइटम का आकार एनिमेट करना: पहला आइटम क्यों भरा हुआ है?
मैंने इसे लागू करने के लिए एक परियोजना के लिए लागू किया है। इसमें तीन लंबवत कॉलम होते हैं। प्रत्येक आइटम 1 9 6 पीएक्स x 70 पीएक्स है। जब आप किसी आइटम पर क्लिक करते हैं, तो यह 402px x 230px तक बढ़ जाएगा।
सभी आइटम ठीक से आकार बदलते हैं और आइसोटोप को लेआउट रीफ्रेश करने का कारण बनते हैं - पहले आइटम को छोड़कर।
पहले आइटम पर क्लिक करने से सभी बाद की सूची वस्तुओं को केवल एक लंबवत कॉलम में लाइन करने का कारण बनता है - भले ही वहां बहुत सारे कमरे हैं और आइटम पहले के चारों ओर बहते हैं।
सूची में किसी भी अन्य आइटम पर क्लिक करने से सही व्यवहार होता है। केवल पहला ही भद्दा है। क्या कोई यह देख सकता है कि इसका कारण क्या हो सकता है? http://joshrenaud.com/pd/testcase/testcase.html
कोड है कि संभालती है इस आकार बदलने इस तरह दिखता है:
$('.child').click(function(){
var $this = $(this);
if ($this.hasClass('big')) {
tileStyle = { width: 196, height: 70};
}
else {
tileStyle = { width: 402, height: 230};
}
$this.children().children('.childDate').toggle();
$this.children().children('.childDesc').toggle();
$this.toggleClass('big');
$this.find('.child-content').stop().animate(tileStyle);
$('#container').isotope('reLayout')
});
मुझे यह इंगित करना चाहिए कि यह व्यवहार कोई फर्क नहीं पड़ता कि सूची में कौन सा आइटम पहला है। मेरे वास्तविक प्रोटोटाइप कोड में, मेरे पास विभिन्न मानदंडों से सूची का उपयोग करने के विकल्प हैं। सॉर्ट करने के बाद, जो भी आइटम पहले होता है, वह इस जीत में होगा। – Kirkman14