div ऊंचाई onmouseover

का विस्तार करें मुझे डिफ़ॉल्ट रूप से div 50px पर ऊंचाई की आवश्यकता है और इसे 300px onmouseover में बदलना होगा। मैं इसे लागू करने के लिए नीचे तरीके से कोडित किया।div ऊंचाई onmouseover

<style type="text/css"> 
#div1{ 
height:50px; 
overflow:hidden; 
} 
#div1:hover{ 
height:300px; 
} 
</style> 
<body> 
<div id="div1"></div> 
</body>

यह कोड ठीक काम कर रहा है लेकिन सीएसएस संपत्ति के अनुसार होवर पर इसकी ऊंचाई बदल रही है। अब, मुझे एक स्टाइलिश तरीके की ज़रूरत है जैसे धीरे-धीरे div onmouseover का विस्तार करना और परमाणु अनुबंध करना। होवर पर विस्तार और अनुबंध कैसे करें?

स्रोत

2012-01-20 Mad coder.

आप jQuery इस्तेमाल कर सकते हैं। एनिमेट फ़ंक्शन का उपयोग करना। यहां देखें http://api.jquery.com/animate/ – Undefined

या आप सीएसएस संक्रमण (जब उपलब्ध हो) का उपयोग कर सकते हैं। – biziclop

कुछ दृष्टिकोण हैं - यहाँ सीएसएस और jQuery है, जो सभी ब्राउज़रों में सिर्फ आधुनिक नहीं लोगों को काम करना चाहिए,:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $("#div1").hover(
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=250' //adds 250px 
     }, 'slow' //sets animation speed to slow 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=250px' //substracts 250px 
     }, 'slow' 
    ); 
    } 
); 

}); 
</script> 

<style type="text/css"> 
#div1{ 
    height:50px; 
    overflow:hidden; 
    background: red; /* just for demo */ 
} 
</style> 

<body> 
<div id="div1">This is div 1</div> 
</body>

स्रोत

2012-01-20 16:57:25 Dustin

पहले मूल ऊंचाई को पढ़ना बेहतर है, क्योंकि यदि आप सीएसएस के माध्यम से ऊंचाई बदल रहे हैं, तो आपको जेएस को फिर से संपादित करने की भी आवश्यकता है, जो बहुत व्यावहारिक नहीं है (उदा। भूल जा सकता है)। – feeela

ठीक है, उस स्थिति में, "ऊंचाई: '+ = 250'" को केवल "ऊंचाई: '300px' पर सेट किया जाना चाहिए" – Dustin

क्षमा करें डस्टिन, यह कोड काम नहीं करता :( –

एक "आधुनिक" ब्राउज़र में, तुम सिर्फ एक css transition effect आवेदन कर सकते हैं:

#div1 { 
    -moz-transition: 4s all ease-in-out; 
    -ms-transition: 4s all ease-in-out; 
    -webkit-transition: 4s all ease-in-out; 
    -o-transition: 4s all ease-in-out; 
}

यह एक संक्रमण प्रभाव 4 सेकंड पर एक ease-in-out संगत फ़ायरफ़ॉक्स के लिए आसान के साथ लागू होता है, यानी, क्रोम/Safari (WebKit) और ओपेरा ब्राउज़र। और अधिक पढ़ें:

CSS Transitions

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

BarFoos animations

स्रोत

2012-01-20 16:45:39 jAndy

आप के साथ jQuery के .animate() यह कार्य करेगा उपयोग कर सकते हैं किसी भी तत्व पर "टैब" के एक वर्ग के साथ, और माउस-आउट पर लौट जाएगा।

$('.tab').hover(function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '+=250' 
     }, 500) 

     }, function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '-=250' 
     }, 500)    
})

स्रोत

2012-01-20 16:46:14

धन्यवाद! यह कोड ठीक काम करता है लेकिन पेजलोड पर इसका निष्पादन। इस कोड onmouseover निष्पादित करने के लिए कैसे? मुझे इस तरह के मूर्ख सवाल पूछने के लिए खेद है, लेकिन मुझे नहीं पता कि jQuery में कोड कैसे करें! –

मैं प्रतिक्रिया संपादित कर दूंगा। –

कहने के लिए खेद है! यह काम नहीं किया। मैं 'के रूप में 'और जैसा कि आपने कहा था कि मैंने div को

–

#div1{ 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
}

आसान!

स्रोत

2012-01-20 16:46:15

वाह! कमाल! लेकिन मैं स्लाइडिंग गति को कैसे कम कर सकता हूं? –

उदाहरण के लिए 3s से 1s। –

धन्यवाद! मैंने आपको पूछने से पहले कोशिश की लेकिन मुझे नहीं मिला 3 से 10 में बदलते समय बहुत बड़ा अंतर इसलिए मैंने पूछा! वैसे भी बहुत धन्यवाद। –

आप jQuery के .mouseoverhttp://api.jquery.com/mouseover/, .mouseouthttp://api.jquery.com/mouseout/, और .animate कि प्रदर्शन करने के लिए उपयोग कर सकते हैं।

.mouseover ईवेंट पर, आप 300px होने की ऊंचाई को एनिमेट करेंगे, और .mouseout ईवेंट पर आप 50px पर एनिमेट करेंगे। सुनिश्चित करें कि आप एनिमेट करने से पहले div पर .stop पर कॉल करें, अन्यथा आपको अजीब समस्याएं होंगी।

स्रोत

2012-01-20 16:46:34 Matthew

div ऊंचाई onmouseover

उत्तर

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