javascript - jQuery hover and Slide -

मेरे पास 20 भिन्न डिविज़ हैं।

5 वर्ग = "आइकन",

4 वर्ग = "शास्त्रीय",

4 वर्ग = "वॉलपेपर", और

2 वर्ग = "विविध "।

प्रत्येक div में वर्ग के साथ एक div है ="। प्रकार " मेरे पास शीर्षक प्रकार के शीर्ष भाग (लगभग 27 पिक्सल) हैं, लेकिन बाकी का छिपा हुआ है जब कोई व्यक्ति। प्रकार की डिवा पर जाल करता है, तो यह ऊपर स्लाइड करता है (मार्जिन-टॉप: 0 पिक्सेल को बदलकर) जब माउस अब इसे नहीं खोता है, तो इसे अपने मूल स्थान (मार्जिन-टॉप: 110 पीएक्स) पर वापस जाता है।

और जावा कोड।

  (फ़ंक्शन ($) {Var मूल = []; $ ('। प्रकार')। प्रत्येक (फ़ंक्शन (i) {मूल। Push ($ (this)। सीएसएस ('मार्जिन-टॉप'));}); $ ('। Type' ) .होवर (फ़ंक्शन (ई) {$ (यह) .स्टॉप ()। चेतन ({"मार्जिन-टॉप": ($ (यह)। Parent ()। बाहरी हेइट () - $ (यह)। OuterHeight ()) }, 250);}, फ़ंक्शन (i) {var i = $ ('। प्रकार')। इंडेक्स ($ (यह)); $ (यह) .स्टॉप ()। चेतन ({"मार्जिन-टॉप": मूल [I]}, 250);});} (jQuery));   
 यह पूरी तरह से ठीक काम करता है, किसी को भी एक पर जाली नहीं छोड़ता। टाइप डिव, और दूसरे पर होवर करने के लिए जाता है। पहले पहले टाइप डायल। तो .इनन, .रिकिन, .स्कूल प्रोजेक्ट, आदि। डिव एक बिट से नीचे ले जाया गया है। और अपने आप को इसे बाहर की जाँच करें मुझे नहीं पता कि यह क्यों कर रहा है।   
 
 
 जब आप "मार्जिन-टॉप" का उपयोग करते हैं वास्तव में सीएसएस डिविज़ के प्रवाह के साथ गड़बड़ है, इसलिए यदि आप "टॉप" का प्रयोग करते हैं, तो स्थिति उस डिवेल पर लागू होती है, आपको भी "रिश्तेदार" के रूप में सेट करना होगा। एक अन्य बात, आपकी मूल स्थिति सिर्फ "0" हो सकती है, और खींचने की मात्रा आपके टाइप का आकार हो सकती है।  
 इस संशोधन को बाहर की जाँच करें:  
 ( यहां टेस्ट करें:)  
  (फ़ंक्शन ($) {var मूल = []; $ ('। प्रकार')। प्रत्येक (फ़ंक्शन (i) {मूल.push (0);}) ; $ ('। प्रकार')। हॉवर (फ़ंक्शन (ई) {$ (यह) .स्टॉप ()। चेतन ({"शीर्ष": - ($ (यह)। हाइट ()), 250);}, फ़ंक्शन (i) {var i = $ ('। प्रकार')। इंडेक्स ($ (यह)); $ (यह) .स्टॉप ()। चेतन ({"शीर्ष": मूल [i]}, 250);} );} (JQuery));