jQuery एनिमेट - पूर्ण DIV - उत्कृष्ट पुस्तकालय

को एनिमेट नहीं करता है क्या आप जानते हैं कि मैं jQuery के साथ पूर्ण-स्थिति वाले div को एनिमेट क्यों नहीं कर सकता?jQuery एनिमेट - पूर्ण DIV

शो यहाँ खुश (यहाँ मेरे उदाहरण है):

http://jsfiddle.net/2VJe8/

HTML:

<html> 
<body> 
    <div class="test"> 
     <div class="box"> 
      <div class="arrow"></div> 
     </div> 
     <a href="#" class="btnStartAni">Animate</a> 
    </div> 
</body>

सीएसएस:

.test { margin: 0; padding: 0;} 
.test .box { width: 150px; height: 140px; background-color: red; position: relative; } 
.test .box .arrow { width: 50px; height: 50px; background-color: black; position: 
absolute; bottom: 0; right: -50px;}

जावास्क्रिप्ट:

jQuery(".test a.btnStartAni").on("click", function(e){ 
    e.preventDefault(); 
    jQuery(".box").animate({ width: 400}, 800); 
});

ब्लैक बॉक्स एनीमेशन छिपाने के दौरान होता है! लेकिन मुझे नहीं पता क्यों?

क्या आप कृपया मेरी मदद कर सकते हैं?

स्रोत

2012-12-15 mal200

jQuery 'अतिप्रवाह कहते हैं। यकीन नहीं है कि क्यों। –

jQuery का कारण बनता है अतिप्रवाह छिपा करने के लिए किया जा जब आप .animate उपयोग करते हैं, तो

jQuery(".test a.btnStartAni").on("click", function(e){ 
    e.preventDefault(); 
    jQuery(".box").animate({ width: 400}, 800).css('overflow', 'visible'); 
});

करने के लिए अपने कोड को बदलने और यह

JsFiddle काम करना चाहिए: http://jsfiddle.net/2VJe8/1/

स्रोत: jQuery .animate() forces style "overflow:hidden"

स्रोत

2012-12-15 15:23:41 extramaster

सीएसएस में 'ओवरफ्लो: दृश्यमान! महत्वपूर्ण;' '.box' सेट करने के लिए एक वैकल्पिक (पसंदीदा) समाधान है। – mekwall

overflow: hidden jQuery को बॉक्स को एनिमेट करते समय .box पर सेट हो जाता है। .arrow.box से बहती है और इसलिए गायब हो जाती है। मार्कअप बदलने पर विचार करें।

स्रोत

2012-12-15 15:23:25 onions

आप समान प्रभाव प्राप्त करने के लिए तत्वों को पुन: व्यवस्थित भी कर सकते हैं (float:left का उपयोग करके और एनीमेशन के दौरान hidden`: display:inline-block)

http://jsfiddle.net/mkVrL/

स्रोत

2012-12-15 15:35:05

jQuery एनिमेट - पूर्ण DIV

उत्तर

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