सीमा-त्रिज्या + ओवरफ्लो: jQuery

Question

के साथ एनिमेट करते समय छिपा हुआ यह jsFiddle देखें।

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

कोई विचार क्यों overflow:hidden; उपेक्षा कर रहा है और इस समस्या को हल कैसे करता है? स्पष्ट रूप से सर्कल के बाहर कुछ भी नहीं जाना चाहिए।

इसके लिए भी एक बेहतर समाधान है?

Answer 1

position: absolute और overflow: hiddendisplay: table/table-cell के साथ अच्छी तरह से खेलना प्रतीत नहीं होता है। टेक्स्ट को लंबवत रूप से केंद्र में रखने के लिए आपके पास मौजूद टेबल सामग्री को हटाने से समस्या ठीक हो जाती है। फ़ायरफ़ॉक्स में, कम से कम।

Answer 2

मुझे लगता है कि यह ब्राउज़र बात है ...

यह CSS3 के संस्करण है ...

.progressBar { 
    display: block; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #ec6730; 
    transition: height 1s; 
} 

.innerContainer:hover > .progressBar { 
    height: 300px; 
} 

http://jsfiddle.net/ZyhgT/2/

यह अब 'चमकती कारण ब्राउज़र काम संभाल (कोई जे एस नहीं लूप एनीमेशन ...)। लेकिन फिर भी यह एनीमेशन खत्म पर बढ़त दिखाता है !!! यह ब्राउज़र चीजें हो सकती है ... एक बग हो सकता है ...

Answer 3

यह jQuery या किसी भी जावास्क्रिप्ट से संबंधित नहीं है। असल में, यदि आप अपनी सभी जावास्क्रिप्ट हटाते हैं और ली पर सीएसएस का उपयोग करके अपने .progressBar की ऊंचाई में हेरफेर करते हैं: होवर, आप वैसे भी बग देखेंगे। https://code.google.com/p/chromium/issues/detail?id=157218

एक अगोचर सीएसएस जोड़ने एक समाधान की कोशिश मुखौटा तत्व को बदलने के रूप में::

.outerContainer { 
    -webkit-transform: rotate(0.000001deg); 
} 

Answer 4

आप बस अपनी .outerContainer वर्ग बदलने की जरूरत है और

यह रूप में की सूचना दी एक ब्राउज़र समस्या प्रतीत होता है यह ठीक काम करता है!

.outerContainer { 
    position: relative; 
    display: block; 
    height: 96px; 
    width: 96px; 
    overflow: hidden; 
    background: #fff; 
    border: 2px solid #fff; 

    -webkit-border-radius: 50px; 
      border-radius: 50px; 
} 

Answer 5

बाह्य श्रेणी के div के अंदर स्तर वर्ग रखें और स्तर वर्ग के अंदर अवधि को अपेक्षाकृत स्थानित करने के लिए शैली दें। जावास्क्रिप्ट में, स्तर की गणना करने के लिए, सही गोलाकार होवर प्रभाव के लिए 100 के बजाय 10 से विभाजित करें।

यहां एक fiddle है।

एचटीएमएल

<div class="outerContainer"> 
    <div class="innerContainer"> 
     <p>Circle 3</p> 
     <span class="progressBar"></span> 
    </div> 
    <div class="level"><span>75</span> 
    </div> 
</div> 

सीएसएस

body { 
    background: blue; 
} 

#circles { 
    text-align: center; 
    margin: 100px 0; 
} 

li { 
    display: inline-block; 
    margin: 0 10px; 
    position: relative; 
} 

.outerContainer { 
    position: relative; 
    display: block; 
    height: 96px; 
    width: 96px; 
    overflow: hidden; 
    background: #fff; 
    border: 2px solid #fff; 

    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 

.innerContainer { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
} 

p { 
    color: #000; 
    width: 96px; 
    position: relative; 
    z-index: 2; 
} 

.progressBar { 
    display: block; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #ec6730; 
} 

.level span{ 
    position:relative; 
} 

जे एस

$(function() { 
    $("#circles li").hover(function(){ 
     var thisElement = $(this); 
     var level = $(this).find(".level").text(); 
     var elementHeight = $(this).find(".outerContainer").height();  
     level = (level/10)*elementHeight; 

     $(thisElement).find(".progressBar").stop().animate({ 
      height: level 
     }, 300); 
    }, function() { 
     var thisElement = $(this); 

     $(".progressBar").stop().animate({ 
      height: 0 
     }, 300); 
    }); 
}); 

Answer 6

display: table कि अच्छी बुद्धि काम नहीं करता है एच सीएसएस पोजिशनिंग;

आपको इसका उपयोग करने से बचना चाहिए, और अपने लेबल को लंबवत रूप से केंद्रित करने के लिए कुछ और तरीका ढूंढना चाहिए।

अपनी मंडलियों एक ज्ञात ऊंचाई, अपने कोड इंगित करने के लिए (height:96px ईसीसी) लगता है, तो बस एक निश्चित शीर्ष स्थान एक absolute ly तैनात <p> तत्व के लिए उपयोग किया है, तो:

http://jsfiddle.net/ZyhgT/5/

ध्यान दें कि आप इसके लिए jQuery की भी आवश्यकता नहीं है, यह केवल CSS3 के साथ प्राप्त करने योग्य है (जब तक कि आप पुराने ब्राउज़र को लक्षित नहीं कर रहे हों)

Answer 7

अपनी पहेली को थोड़ा सा संशोधित करें। Here is the link

संशोधन: display:table से display:block को .outerContainer सीएसएस बदल दिया और कहा कि margin-top:30pxp

लिए सीएसएस जांच करें कि यह आपके लिए काम करता है।