मुझे अपने कोड बनाने के लिए कुछ समस्याएँ हो रही हैं <li> स्लाइडडाउन जब मैं एक बटन क्लिक करता हूं। मैंने एक jsFiddle बनाने की कोशिश की, लेकिन किसी कारण से CSS को प्रदर्शित नहीं किया गया यहाँ यह है।
मेरे पास एक वेबसाइट है जिसमें कुछ भी नहीं भरा एक केंद्र है। दोनों पक्षों में नेविगेशन बार हैं, और अभी यह केवल बाएं वाला है जिसमें कुछ भी है <div> के साथ <ul> इसमें, और प्रत्येक के दाईं ओर <li> थोड़ा विस्तारित बटन है, और जब उस पर क्लिक किया जाता है (केवल "इसके अलावा यह क्या है?"), "यह क्या है" के बाहर एक छोटा सा छिपा पाठ करते हैं slideDown(500) और अनुबंध img में विस्तार img परिवर्तन। और अगर अनुबंध img पर क्लिक किया जाता है, तो यह करना चाहिए slideUp(500) लेकिन किसी कारण के लिए यह सिर्फ सही करने के लिए छिपे हुए बिना पॉप करता है slideUp(500).
उत्तर:
जवाब के लिए 0 № 1इसे थोड़ा काम करने की जरूरत है लेकिन मैंने आपकी प्रमुख समस्या को ठीक करने के लिए आपके उदाहरण को अपडेट किया है।
$(document).ready(function() {
$("#whatExpand").click(function () {
$("#whatExpand").hide();
$("#whatContract").show();
$("#whatRolldown").slideDown(500);
//$("#whatRolldown").css("display, inline");
});
$("#whatContract").click(function () {
$("#whatContract").hide();
$("#whatExpand").show();
$("#whatRolldown").slideUp(500);
//$("#whatRolldown").css("display", "none");
});
});
JQuery सभी फैंसी सामान को संभालता है इसलिए छिपी जा रही सामग्री के लिए प्रदर्शन मूल्य सेट करने के बारे में चिंता न करें।
जवाब के लिए 0 № 2
jQuery के एनिमेशन अतुल्यकालिक हैं। जब तुमने फोन किया .slideUp(), यह एक टाइमर बंद हो जाता है जो कदम रखना शुरू कर देता हैएनीमेशन के माध्यम से, और रिटर्न को तुरंत नियंत्रित करता है (ताकि ब्राउज़र पूरा न हो जाए जब तक कि एनीमेशन पूरा न हो जाए - क्योंकि जावास्क्रिप्ट थ्रेडेड है)। दूसरा तर्क के रूप में एक कॉलबैक) .slideUp()। उदाहरण:
$("#whatRolldown").slideUp(500, function() { $(this).css("display", "none"); })
});
जिस कारण से आप इसे नोटिस नहीं करते हैं slideDown() क्या वह slideDown() पहले से ही सीएसएस सेट करता है display तत्व के अलावा कुछ और करने के लिए none यह सुनिश्चित करने के लिए कि तत्व एनीमेशन के दौरान दिखाया गया है। तो आपका .css("display", "inline") वास्तव में इस मामले में कुछ भी नहीं कर रहा है।
इसके अलावा, आप अपने फिडेल के आउटपुट को नहीं देख रहे हैं क्योंकि आपके पास है margin-top:-155px पर .bar तत्व।