डिव को आसानी से विस्तृत करें

Question

मैं एक div का विस्तार करने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं, लेकिन जब सामग्री का विस्तार किया जाता है तो यह बेहद अचानक और बेहद अनैतिक है। मैं सोच रहा था कि क्या इस div को धीरे-धीरे विस्तारित करने का एक तरीका था और एक दृश्य के बाद एक ब्लेम का विस्तार हुआ। अब मैं कर रहा हूँ

<script language="javascript"> 
function toggle_profile() { 
    var ele = document.getElementById("toggleProfile"); 
    var text = document.getElementById("displayProfile"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "View Profile"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Profile"; 
    } 
} 
         </script> 

         <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> 
         <br /> 
        <div id="toggleProfile" style="display: none"> 

Answer 1

वास्तव में पहिया का पुन: आविष्कार करने में कोई बात नहीं है। आप Jquery के slidetoggle के साथ यह बहुत आसानी से कर सकते हैं। यहाँ पृष्ठ है: http://api.jquery.com/slideToggle/

Answer 2

चाल जोड़कर और जावास्क्रिप्ट में कक्षाओं को हटाने ... और इस तरह एक CSS3 के संक्रमण संलग्न के साथ है:

div { 
    -webkit-transition: height .25s ease; 
     -moz-transition: height .25s ease; 
      transition: height .25s ease; 
} 

यह एक संक्रमण लागू होता है कि आप सभी के लिए की गति को नियंत्रित कर सकते आपके divs बेशक आप चुन सकते हैं कि कौन से डीओएम तत्व इसे स्वयं लागू कर सकते हैं।

और फिर दो jQuery कार्यों मैं प्रयोग करेंगे

$("#object").addClass("removeThis"); //hide 
$("#object").removeClass("removeThis"); //show 

हैं लेकिन जैसे-जैसे आप ने बताया jQuery उपयोग नहीं कर सकते! अच्छा यहाँ!

document.getElementById("object").className = ""; 
document.getElementById("object").className = "removeThis"; 

कहाँ "#object" वस्तु आप लक्षित कर रहे हैं, और ".removeThis" है वर्ग आप को जोड़ने और डोम टैग में वर्ग विशेषता से हटा रहे हैं है। वह सीएसएस में ऐसा लगता है।

#object { 
    height: 200px; 
    /* ignoring other CSS */ 
} 

.removeThis { 
    height: 0; 
} 

मान लीजिए कि आप इसे ऊपर और नीचे स्लाइड करना चाहते हैं। एक और चाल अस्पष्टता का उपयोग करना है, या प्रदर्शन: कोई नहीं और प्रदर्शन: ब्लॉक। लेकिन चारों ओर खेलते हैं। आशा है कि ये आपकी मदद करेगा!

2012 से संपादित करें: चूंकि आप जावास्क्रिप्ट का उपयोग कर उपयोग कर रहे हैं, इसलिए आप मुख्य थ्रेड पर काम करने के लिए कह रहे हैं, आप इसके बजाय ट्रांसफॉर्म पर एनिमेट करके कंपोजिटर थ्रेड का उपयोग कर सकते हैं। यही है अगर आप ऊंचाई शैली की संपत्ति को एनिमेट करने से दूर कैसे हो सकते हैं।

Answer 3

मुझे लगता है कि विभाजन में सीएसएस overflow:hidden संपत्ति का उपयोग करना सबसे अच्छा चाल है। यह उस सामग्री को छिपाएगा जो div ऊंचाई या चौड़ाई से बाहर है। फिर आप चिकनी सीएसएस संक्रमण के साथ विभाजन की ऊंचाई को आसानी से बढ़ा सकते हैं और घटा सकते हैं।

आप the tutorial here