div

Question

0Vको स्थानांतरित किए बिना JQuery एनिमेट सीमा मैं माउसवेर पर 5px द्वारा सीमा को मोटा कर बनाकर एक div को एनिमेट करना चाहता हूं, फिर माउसलेव पर 5px द्वारा सीमा को कम करना, मुश्किल हिस्सा यह है कि मैं नहीं चाहता कि div यह चल रहा है (यदि आप सीमाओं को सिर्फ एनिमेट करते हैं, तो पूरा div इस तरह दिखता है, न केवल सीमा मोटी/पतली हो रही है)। मैं बहुत करीब हूं, लेकिन मैं आखिरी हिस्से पर फंस गया हूं: माउसलेव। क्या मैं अब तक है:

$("#thumbdiv<%=s.id.to_s%>").bind({ 
      mouseenter: function(){ 
       $(this).animate({ 
        borderRightWidth: "25px", 
        borderTopWidth: "25px", 
        borderLeftWidth: "25px", 
        borderBottomWidth: "25px", 

        margin: "-5px" 
       }, 500); 
      }, 
      mouseleave: function(){ 

       $(this).animate({ 
        borderRightWidth: "20px", 
        borderTopWidth: "20px", 
        borderLeftWidth: "20px", 
        borderBottomWidth: "20px", 

        margin: "0px" 
       }, 500); 
      } 
     }); 

मैं सीमा सेट इस से पहले कहीं 20px किया जाना है, और मार्जिन सेट नहीं है, तो यह 0px है। Div माउससेंटर पर बस ठीक है, मैं वास्तव में जगह से बाहर निकलने के बिना सीमा को मोटा कर सकता हूं, लेकिन जब माउसलेव ट्रिगर होता है, तो div पहले खुद को स्थिति में स्थानांतरित कर देगा जैसे कि "मार्जिन -5 पीएक्स" कभी नहीं कहा जाता था , और फिर धीरे-धीरे इसकी सीमा घटाएं और ऐसा लगता है कि "मैगिन: '0px'" वास्तव में नहीं कहा जा रहा है।

मुझे यकीन नहीं है कि मेरा विवरण समझ में आता है, तो यदि आवश्यक हो तो मैं प्रोटोटाइप डाल सकता हूं।

Answer 1

तो मैं अंत में अपने खुद के जवाब मिल गया। दोहराना करने के लिए मैं चाहता था:

1. परिपत्र divs
2. एनीमेशन बढ़ रही सीमा की चौड़ाई
3. div है जैसे कि यह "गतिमान" है, केवल सीमाओं भागों चलती होना चाहिए देखने के लिए नहीं चाहते हैं

मैंने दोनों को मार्जिन और सीमा को एक ही समय में एनिमेट करके हासिल किया, क्योंकि यदि आप सीमा को एनिमेट करते हैं, तो पूरा div बदल जाएगा। लेकिन यदि आप सीमा को बढ़ाने के साथ ही मार्जिन को कम करते हैं, तो आपको अभी भी खड़े खड़े होने का भ्रम मिलता है।

सीधे शब्दों में, हम एक परिपत्र div है:

#somediv { 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
    border: solid 0px; 
    vertical-align: middle; 
    border-radius: 2000px; 
    background-color: #ccc; 
    margin: 0px; 
} 

और की तरह एक JQuery समारोह के साथ:

$(function(){ 
    $("#somediv").mouseover(function(){ 
    $(this).animate({"borderLeftWidth" : "5px", 
        "borderRightWidth" : "5px", 
        "borderTopWidth" : "5px", 
        "borderBottomWidth" : "5px", 

        "marginLeft" : "-5px", 
        "marginTop" : "-5px", 
        "marginRight" : "-5px", 
        "marginBottom" : "-5px" 
        }, 300); 
    }).mouseout(function(){ 
     $(this).animate({"borderLeftWidth" : "0px", 
         "borderRightWidth" : "0px", 
         "borderTopWidth" : "0px", 
         "borderBottomWidth" : "0px", 

         "marginLeft" : "0px", 
         "marginTop" : "0px", 
         "marginRight" : "0px", 
         "marginBottom" : "0px" 
         }, 300); 
    }); 
}); 

हम हासिल कर सकते हैं कि हम क्या चाहते हैं।

उदाहरण के रूप में this fidddle देखें।

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

Answer 2

दिलचस्प मुद्दा ... यह कक्षाएं स्विच करके बेहतर काम करता है, लेकिन फिर भी यह बहुत चिकनी नहीं है:

http://jsfiddle.net/dzTHB/13/

Answer 3

मैं पूरी कोड को पढ़ने के लिए नहीं था, लेकिन मुझे लगता है कि ऐसा करने के लिए एक बेहतर aproach है आपको क्या चाहिए।

यह "रूपरेखा" सीएसएस संपत्ति है।

कल्पना कहते हैं: "... स्थिति या बॉक्स के आकार को प्रभावित नहीं करता है ... ... पुनर्प्रवाहित या अतिप्रवाह का कारण नहीं है ..."

http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines

कोड

jQuery(#thumbdiv<%=s.id.to_s%>").mouseenter(function() { 
jQuery(this).css("outlineStyle", "solid").animate({ 
    'outlineWidth': '5px' 
}, 500); 
}).mouseout(function() { 
jQuery(this).animate({ 
    'outlineWidth': '0px' 
}, 500).css("outlineStyle", "solid"); 
}); 

नोट::

ठीक है, मैं @Nabab "फिडल" (मुझे लगता है कि सेवा के बारे में पता नहीं था) संपादित और मैं यह मिल गया: http://jsfiddle.net/EbTms/ कुछ इस तरह होगा ... मुझे लगता है कि यह काम करता है।

Answer 4

ठीक है, यह चुनौतीपूर्ण हो गया। के रूप में "inline-

, अपने divs में से हर एक के लिए एक आवरण (एक और div) का प्रयोग करें उन्हें से भी बड़ा, रैपर में अपने divs केंद्र (अनुलंब और क्षैतिज):

ध्यान रखें कि आपके divs परिपत्र हैं में होने ब्लॉक "और फिर उन्हें एनिमेट करें।

प्रत्येक सीमा को "सीमावर्ती" के बजाय अच्छी तरह से काम करने के लिए स्वतंत्र रूप से एनिमेटेड होना चाहिए ("सीमावर्ती चौड़ाई", "सीमा राइटविड्थ", आदि। यह jQuery में बहुत अच्छी तरह से प्रलेखित बग नहीं है: http://bugs.jquery.com/ticket/7085 (यह खोजना मुश्किल था)।

ऐसा लगता है काम कर रहे: http://jsfiddle.net/y4FTf/2/

एचटीएमएल

<div class="wrapper"> 
<div class="content">Hello World! 
</div> 
</div> 
<div class="wrapper"> 
<div class="content">Foo Bar 
</div> 
</div> 

सीएसएस

.wrapper { 
width: 210px; 
height: 210px; 
line-height: 210px; 
text-align: center; 
padding: 0px; 
} 
.content { 
display: inline-block; 
height: 200px; 
width: 200px; 
border: solid 0px; 
vertical-align: middle; 
border-radius: 2000px; 
background-color: #ccc; 
margin: 0px; 
} 

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

$(function(){ 
$(".content").mouseover(function(){ 
    $(this).animate({"borderLeftWidth" : "5px", 
        "borderRightWidth" : "5px", 
        "borderTopWidth" : "5px", 
        "borderBottomWidth" : "5px" 
        }, 300); 
}).mouseout(function(){ 
     $(this).animate({"borderLeftWidth" : "0px", 
         "borderRightWidth" : "0px", 
         "borderTopWidth" : "0px", 
         "borderBottomWidth" : "0px" 
         }, 300); 
}); 
});