jquery

के साथ खोलने वाली सामग्री को स्लाइड करने के लिए कैसे करें मेरे डिजाइनर ने मुझे एक डिज़ाइन दिया है, मुझे 100% यकीन नहीं है कि jquery और css के साथ कैसे करें। मैं मूल रूप से उपयोगकर्ता को अधिक सुसंगत प्रकट करने के लिए पाद लेख को "स्लाइड" करने की अनुमति देने की कोशिश कर रहा हूं।jquery

मेरे एचटीएमएल ..

<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div>

मैं फिर वापस बंद करने के लिए स्लाइड एक टॉगल बटन कि onclick

$('#expandingFooter').slideToggle();

यह नीचे खुला का विस्तार पाद लेख सामग्री स्लाइड है,। मैं इसे स्लाइड करना चाहता हूं और फिर बंद करना चाहता हूं।

धन्यवाद इस तरह

स्रोत

2008-12-12 studiothat

आप JQuery UI 1.6 के प्रभाव (Effects Demo Page) का लाभ उठा सकते हैं। निम्नलिखित मेरे लिए वांछित प्रभाव पूरा किया।

$('#toggleButton').bind('click', function(e) { 
    $('#expandingFooter').toggle(
     'slide', 
     { easing: 'easeOutQuint', direction: 'down' }, 
     1000 
    ); 
});

नोट: आप प्रभाव की वांछित चिकनीता प्राप्त करने के लिए आसान पैरामीटर के साथ खेलना चाह सकते हैं।

ऐसा करने के लिए आपको JQuery और JQuery UI Slide Effect दोनों के नवीनतम संस्करणों की आवश्यकता होगी।

स्रोत

2008-12-12 19:07:52 Manik

कोशिश कुछ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
    $("#footer").click(function() { 
     if ($("#expandingFooter").is(":hidden")) { 
     $("#expandingFooter").show("slow"); 
     } else { 
     $("#expandingFooter").slideUp(); 
     } 
    }); 
    $("#expandingFooter").hide(); 
    }); 
    //--></script> 

</head> 

<body> 
<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div> 
</body> 
</html>

स्रोत

2008-12-12 18:45:21 cLFlaVA

मेरे समाधान एक चाल का एक सा है। स्लाइडअप() जिस तरह से आप चाहते हैं उसे JQuery में नहीं बनाया गया है क्योंकि जिस तरह से आप इसे प्राप्त कर सकते हैं, वह आपके एचटीएमएल/सीएसएस डिज़ाइन पर निर्भर करता है। सामान्य प्रवाह ऊपर से नीचे तक है।

मेरा सुझाव यह:

<a id="toggle">Toggle()</a> 

<div id="slide" style="position:relative; height: 100px"> 

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue""> 
     <p>Suspendisse potenti. Vivamus libero. Dummy Text</p> 
    </div> 

</div> 


<script type="text/javascript"> 
    $('.hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

    $('#toggle').click(function() { 
     $('#slideInner').slideToggle(); 
    }); 
</script>

इस कोड को सिर्फ एक उदाहरण है। इनलाइन सीएसएस को बाहरी शीट में ले जाएं। जावास्क्रिप्ट के लिए Idem।

यदि आप 'स्लाइड' div को अपमानित करना चाहते हैं, तो स्लाइड स्लाइड पर कॉलबैक जोड़ें() स्लाइड 'div' पर कॉल छुपाएं() को कॉल करें।

स्रोत

2008-12-12 18:51:53

उत्तर

संबंधित मुद्दे