jQuery स्लाइडडाउन बनाम jQuery यूआई। शो ('स्लाइड')

Question

मैं एक "दराज" बनाने के लिए jQuery की अंतर्निहित प्रभाव कार्यक्षमता का उपयोग करने की कोशिश कर रहा हूं जो नेविगेशन बार के पीछे से स्लाइड करता है, जिससे नीचे की सामग्री को दबाया जाता है मार्ग।

यदि मैं $('#drawer').slideDown() का उपयोग करता हूं, तो सामग्री को रास्ते से बाहर धकेल दिया जाता है, लेकिन सामग्री वास्तव में "नीचे स्लाइड नहीं होती है।" सामग्री को प्रकट करने के लिए यह एक अधिक मिटा है।

यदि मैं $('#drawer').show('slide',{direction:'up'}) का उपयोग करता हूं, तो सामग्री सही ढंग से नीचे स्लाइड हो जाती है, लेकिन प्रभाव से पहले तत्व के नीचे की सभी सामग्री रास्ते से बाहर निकलती है।

क्या इन दोनों में से सबसे अच्छे प्रभाव को गठबंधन करने का कोई तरीका है जो मैं ढूंढ रहा हूं: एक दराज जो स्लाइड करता है, नीचे से सामग्री को नीचे से दबा रहा है?

मैंने jQuery UI के .animate() फ़ंक्शन की जांच की है, लेकिन दस्तावेज़ीकरण अनुपयोगी है। इसका उपयोग करने के लिए मेरे कच्चे प्रयास विफलता से भरे हुए हैं।

और, मामले किसी को पूछता है, माफ करना, मैं नहीं एक उदाहरण दिखा सकते हैं, लेकिन हम इसे jQuery दराज प्लगइन की तरह कार्य करना चाहते हैं:

http://lib.metatype.jp/jquery_drawer/sample.html

लेकिन उस प्लगइन नहीं करता है काफी कुछ जो हमें चाहिए, अन्यथा मैं इसका उपयोग करूंगा (बुलेट सूची या AJAX सामग्री का उपयोग नहीं कर रहा हूं)। हालांकि, वही प्रभाव है जो हम चाहते हैं।

अद्यतन: मैं भी jQuery दराज प्लगइन के माध्यम से कोड के इस हिस्से की कोशिश की है, लेकिन यह सब पर चेतन नहीं करता है:

$('#drawer').css({ marginTop: $('#drawer').height() * -1 }).animate({ marginTop: 0 }); 

स्पष्ट करने के लिए, भी, यह एक समारोह OpenDrawer() भीतर कहा जाता है कि इस प्रकार कहा जाता है:

$(document).ready(function() { 
    OpenDrawer(); 
}); 

डिफ़ॉल्ट रूप से यह पृष्ठ लोड होने पर लोड हो जाएगा।

Answer 1

हां यह accordion व्यवहार की तरह है सिवाय इसके कि आप इसे भी स्लाइड कर सकते हैं। मैंने यह कार्यक्षमता बनाने के लिए उपयोग किया है जो मुझे लगता है कि आप क्या देख रहे हैं।

$('#drawer').slideDown('slow');

गति आप अलग अलग स्लाइड गति से आपकी इच्छानुसार देखने के लिए प्राप्त कर सकते हैं बदल कर। अब, भले ही आपके पास दराज तत्व है, आपको एक कंटेनर की आवश्यकता है जो प्रारंभ में छुपा हुआ है जो स्लाइड करेगा। आइए कहें कि आपके पास "ड्रॉवर" की एक आईडी वाला बटन है, और "myDrawerContent" की आईडी वाला एक कंटेनर है। आप निम्न,

$('#drawer').click(function() { 
    $('#myDrawerContent').slideDown('slow'); 
} 

$('#drw_loader').animate({ 
    height: $('#drw_ajax').height() }, 
    function() { $('#drw_loader').fadeOut(function() { $('#drw_ajax').fadeIn(); }); 
}); 

आशा इस मदद करता है करना होगा।

महानगरों

Answer 2

जावास्क्रिप्ट आप अपने प्रश्न अद्यतन में काम करता है, लेकिन यह एक तत्व सामग्री ही की अपेक्षा अपनी सामग्री से युक्त पर काम करने की जरूरत है।

कार्रवाई में यह देखने के लिए, एक और div साथ तत्व #drawer चारों ओर:

<div id='container'> 
    <div id='drawer'>...</div> 
<div> 

और चेतन कंटेनर:

$('#container') 
    .css({ marginTop: $('#container').height() * -1 }) 
    .animate({ marginTop: 0 }); 

Answer 3

मेरा मानना ​​है कि आप और अधिक 'अंधा की तरह एक प्रभाव के लिए देख रहे ':

$('#drawer').show('blind'); 

यह अजीब है कि $ .fn.slideDown () और $ .fn.show ('स्लाइड') एक ही तरीके से काम नहीं करते हैं, बल्कि 'अंधा' करता है। 'स्लाइड' आपके ऑब्जेक्ट का आकार प्लेसहोल्डर बनाता है और फिर दृश्य के फ्रेम में स्लाइड करता है, जबकि अंधेरे आपके तत्व की ऊंचाई या चौड़ाई को समायोजित करता है जब तक कि यह सही आकार तक फैलता नहीं है (जबकि अतिप्रवाह छिपाने के लिए सेट होता है)। तो वास्तव में, प्रभाव नाम सही हैं, लेकिन विरासत नाम $ .fn.slideDown() के कारण कुछ भ्रम है।

Answer 4

यह देर से पोस्ट है, लेकिन मुझे इस समस्या का सामना करना पड़ा और कुछ ऐसा करने में कामयाब रहा।

मैं एक jQuery या जावास्क्रिप्ट गुरु नहीं हूं इसलिए इस त्वरित समाधान के साथ कठोर न हों।

यहां एक छोटा सा उदाहरण है। प्रभावों का क्रम सम्मान करना चाहिए। आप वास्तव में अच्छा ड्राइंग प्रभाव रखने के लिए एनीमेशन समय की लंबाई के साथ खेल सकते हैं।

मैं बस जल्दी से एफएफ 3.6

पर यह परीक्षण किया आप गूगल कोड खेल के मैदान पर उदाहरण कोशिश कर सकते हैं। http://code.google.com/apis/ajax/playground/#jqueryui

एचटीएमएल संपादित करें पर क्लिक करें, कोड पेस्ट करें और कोड चलाएं क्लिक करें। उदाहरण काम करना चाहिए

आशा है कि यह मदद करेंगे

<html> 
<head> 
<!--<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.6.min.js"></script>--> 
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 
    </script> 
</head> 
<body> 
<script> 
jQuery(function() 
{ 
    // We bind the <a>I'm the push link!</a> click event to the toggle function 
    $("#topPart a").click(function() 
             { 
              toggleSlide(this); 
             });     
}); 
function toggleSlide(element) 
{ 
    var drawer = jQuery("#drawer"); 
    var content = jQuery("#drawerContent"); 
    if (jQuery(content).is(":hidden")) 
    { 
     // The order here is important, we must slide juste before starting blinding 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "show"}, 500); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 490); 

        },1); 
    } 
    else 
    { 
     setTimeout(function() 
        { 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "hide" }, 500); 
         // The previous blind effect hide the drawer 
         // However we want it to be shown again, if not the next "drawer opening effect" won't play 
         jQuery(drawer).effect("blind", { direction: "vertical", mode : "show" }, 1); 
        },1); 
     setTimeout(function() 
        { 
         jQuery(content).effect("slide", { direction: "up", mode : "hide" }, 460); 
        },1); 
    } 
} 

</script> 

    <div id="topPart"> 
     <a href="javascript:void(0)">I'm the push link!</a> 
    </div> 
    <div id="drawer"> 
     <div id="drawerContent" style="display:none;border:1px solid transparent;width:600px;"> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, .... 
     </p> 
     <p> 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
     </div> 
    </div> 
    <div id="bottomPart"> 
    I want to be pushed nicely 
    </div> 
</body> 
</html> 

Answer 5

मैं भी इस (कदाचित सरल) प्रभाव का एक सभ्य कार्यान्वयन के लिए तलाश रहे हैं, और यह सबसे अच्छा एक मैंने पाया है : http://eric.muyser.com/work/jquery/drawer/example/

अधिक जानकारी/कोड/आदि के लिए यहाँ देखें: http://eric.muyser.com/blog/post/jquery-plugin-jdrawer

हालांकि, यह अभी overkill लगता है और एक में नीचे उबला हुआ होने की जरूरत है नंगे सार एनीमेशन प्लगइन जिसे .show() के माध्यम से बुलाया/लगाया जा सकता है, जो कि आप पहले से ही jQuery/UI में मानक के रूप में पहले से मौजूद होने की अपेक्षा करेंगे ... लेकिन दुख की बात नहीं है ...