jQuery - एनीमेट तत्व जिसमें बच्चों के बाहर बिल्कुल स्थित है -

Question

ब्लिंकिंग अगर मुझे इससे पहले संबोधित किया गया है, तो कुछ भी नहीं मिला।

मैं एक सामग्री बार एनिमेट कर रहा हूं जिसमें बच्चों के बाहर पूरी तरह से स्थित है (नकारात्मक मार्जिन के माध्यम से)। विचार यह है कि बच्चे बार के साथ एनिमेट करेंगे क्योंकि यह विस्तार करता है।

एनीमेशन शुरू होने के बाद ही होता है, और फिर एनीमेशन पूर्ण होने पर फिर से दिखाई देता है। ऐसा लगता है कि ब्राउज़र को पता है कि ब्राउज़र कहां रखना है, एनीमेशन को पूरा करने की आवश्यकता है।

मैं एक बहुत ही सरल उदाहरण अपलोड कर दिया है यहाँ, सभी स्क्रिप्ट पृष्ठ पर शामिल: http://www.ismailshallis.com/jdemo/

वास्तव में क्या हो रहा है? इस के आसपास काम करने के मेरे विकल्प क्या हैं?

अग्रिम में बहुत धन्यवाद,

बेलिंडा

Answer 1

जब jQuery या तो ऊंचाई या एक तत्व की चौड़ाई एनिमेट है, यह स्वतः ही overflow: hidden तत्व पर जबकि एनीमेशन हो रहा है सेट हो जाएगा। चूंकि आपके बच्चे के तत्व को बाहर रखा गया है, यह तकनीकी रूप से अतिप्रवाह का हिस्सा है। कोड के पास jquery स्रोत में टिप्पणी जो यह कहती है "// सुनिश्चित करें कि कुछ भी बाहर नहीं निकलता है।" आप असम्पीडित jQuery स्रोत शामिल हैं और jQuery-1.3.2.js (animate समारोह के अंदर) की लाइन 4032 बाहर टिप्पणी करते हैं:

//this.style.overflow = "hidden"; 

आपको लगता है कि एनीमेशन आपकी इच्छानुसार काम करता है देखेंगे। मुझे ऊपर की रेखा पर टिप्पणी करके jquery स्रोत को संशोधित करने के अलावा अन्य कामकाज के बारे में निश्चित नहीं है।

Answer 2

अच्छा - ऐसा लगता है कि यह ब्राउज़र या jQuery का एक फ़ंक्शन है, जिस तरह से आपने अपना HTML या जावास्क्रिप्ट बनाया है। मैं ऐसा इसलिए कहता हूं क्योंकि ऐसा लगता है कि डीओएम तत्व के बाध्यकारी बॉक्स के अंदर केवल पिक्सेल क्षेत्र प्रस्तुत किया जाता है (पाठ को स्थानांतरित करने का प्रयास करें ताकि टेक्स्ट का आधा बाहर हो और आधा अंदर ... आप "कट ऑफ" टुकड़ा देखें टेक्स्ट के रूप में एनिमेट करता है।)

तो यहां चारों ओर काम है: यह "#box" और "#outside" के चारों ओर एक रैपर डीवी का उपयोग करता है जैसे कि दोनों रैपर के बाउंडिंग बॉक्स के अंदर हैं।

सीएसएस:

#boxWrapper { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     width: 200px; 
     height: 200px; 
     margin-left: -100px; 
     margin-top: -120px; /* extra 20px for the #outside */ 
     background:#ccc; 
    } 

    #box { 
     background: #000; 
     height:100%; 
     width:100%; 
     margin-top:20px; /* give 20px for the #outside */ 
    } 

    #outside { 
     background:darkblue; 
     position: absolute; 
     top: 0px; 
     right: 0; } 

और HTML:

<div id="boxWrapper"> 
    <div id="box"> 
     <a href="#">CLICK ME</a> 
     <div id="outside"> 
      I'm positioned OUTSIDE the box 
     </div> 
    </div> 
</div> 

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

<script type="text/javascript"> 
    $(document).ready(function() { 

      $("#box a").click(function(){ 
       $("#boxWrapper").animate({ 
         height: "410px", 
         opacity: 0.9, 
         top: "25%" 
         }, 1000); 
       return false; 
      }); 
     }); 

</script> 

Answer 3

के jQuery वहाँ 1.4.3 के रूप में एक और समाधान को संशोधित करने की आवश्यकता नहीं है कि है jQuery। यदि आप एनीमेशन शुरू करने से पहले एक इनलाइन शैली के रूप में एनिमेटिंग कर रहे तत्व की 'ओवरफ्लो' शैली सेट करते हैं तो jQuery 'ओवरफ्लो' शैली को छिपाने के लिए सेट नहीं करेगा। उदाहरण के लिए:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#box a").click(function() { 
      $("#box") 

      // Prevents absolutely positioned elements from getting clipped. 
      .css('overflow', 'visible') 

      .animate({ 
       height: "410px" 
      }) 

      // Reset the 'overflow' style. You could also put this in the 
      // animate() callback. 
      .css('overflow', ''); 
     }); 
    }); 
</script> 

Answer 4

वैकल्पिक रूप से, आप अपनी पसंद आ सकती है कि तत्व !important विनिर्देश का उपयोग करके visible रहते हैं।

#box { 
    overflow: visible !important; 
}