jQuery: ऑटो को एनिमेट करें?

Question

मैं एक छवि को एनिमेट करने की कोशिश कर रहा हूं ताकि वह स्वयं केंद्रित हो। यहाँ कोड मैं का उपयोग करना चाहते है:

$('#myImage').animate({'margin-right': 'auto'}); 

लेकिन जब मैं ऐसा, इसे नजरअंदाज कर रहा है और मार्जिन नहीं बदलता है।
क्या ऑटो को मार्जिन एनिमेट करने का कोई तरीका है, या अन्यथा कोई छवि केंद्रित करें?

धन्यवाद!

Answer 1

'ऑटो' एक संख्या नहीं है, jQuery इसे एनिमेट नहीं कर सकता है।

आप दस्तावेज़ के प्रवाह से बाहर छवि लेने के साथ ठीक कर रहे हैं, तो आप पूर्ण करने के लिए स्थिति सेट कर सकते या तय की और कोशिश:

$('#myImage').animate({'left': '50%', 'margin-left': -$('#myImage').width()/2 }); 

Answer 2

आप auto संपत्ति को एनिमेट नहीं कर सकते। स्क्रीन के केंद्र में तत्व को सही ढंग से एनिमेट करने के लिए आपको इसे absolutely (या अन्य) स्थिति और फिर स्क्रीन आकार, तत्व आकार और स्क्रॉल स्थिति की गणना करने की आवश्यकता होगी। कुछ इसी तरह पर another SO answer है। Here is the Fiddle

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    var top = ($(window).height() - this.height())/2+$(window).scrollTop() + "px", 
     left = ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"; 
    this.animate({top: top, left: left}); 
    return this; 
} 

वैकल्पिक रूप से अगर आप केवल क्षैतिज संरेखण चाहते हैं चेतन समारोह से शीर्ष निकाल सकते हैं। और यदि आप वास्तव में रचनात्मक बनना चाहते हैं तो आप position:absolute को हटा सकते हैं, और स्क्रीन आकार बदलने के मामले में एनीमेशन के बाद margin:auto को पुनर्स्थापित कर सकते हैं। See another fiddle।

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    var left = ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"; 
    this.animate({left: left}, function(){ 
     $(this).css({position: 'static', margin: '0 auto'}); 
    }); 
    return this; 
} 
$('#selector').center(); 

Answer 3

योशिय्याह RUDDELL के जवाब पर विस्तार। यदि आपको दस्तावेज़ में अपना प्रवाह रखने के लिए लोगों को अपनी छवि की आवश्यकता है, तो योशीया के उत्तर के इस संशोधित संस्करण का उपयोग करें। मेरी छवि मूल रूप से मार्जिन पर स्थित थी: 0 -1000 पीएक्स, और गणना की गई मार्जिन में बाएं और दाएं स्लाइड। डोम में उसके प्रवाह को पूरे समय

jQuery.fn.center = function() { 
var margin = ($(window).width() - this.width())/2; 
this.animate({marginLeft: margin, marginRight: margin}, function(){ 
    $(this).css({margin: '0 auto'}); 
}); 
return this; 

}