मैं कोड के एक साधारण स्निपेट में jQuery का उपयोग कर li तत्व की चौड़ाई को एनिमेट कर रहा हूं। मैं चौड़ाई को एनिमेट करने के लिए हैंडलर और .animate() के रूप में hover() का उपयोग कर रहा हूं। मेरा कोड यहाँ है।jQuery के साथ चौड़ाई को एनिमेट करते समय अजीब "हिलना" प्रभाव (केवल क्रोम में!)
$('li').each(function() {
//store the original width of the element in a variable
var oldWidth = $(this).width();
$(this).hover(
function() {
//when the mouse enters the element, animate width to 900px
$(this).animate({width: '900px'}, 600, 'linear')
},
function() {
//when the mouse leaves, animate back to the original width
$(this).animate({width: oldWidth}, 350, 'linear')
}
);
});
कोड वास्तव में बहुत सरल है और लेकिन काम करता है क्रोम में एक बहुत अजीब मोड़ के साथ। तत्वों को एनिमेट करते समय, li तत्व "हिलाएं" जैसे कि वे वास्तव में ठंडा हैं और कंपकंपी कर रहे हैं। आप यहां लाइव उदाहरण में व्यवहार देख सकते हैं: http://missmd.org/ (संपादित करें: बग अब तय किया गया है)
मैंने jQuery के साथ पहले सामान का एक गुच्छा एनिमेट किया है और इस व्यवहार को कभी नहीं देखा है। क्या ऐसा कोई स्पष्टीकरण है कि ऐसा क्यों होता है और मैं इसके आसपास कैसे हो सकता हूं? मैं सोच रहा हूं कि ऐसा इसलिए है क्योंकि मैंने तत्वों को दाईं ओर फ़्लोट किया है और बाईं ओर एनिमेट कर रहा हूं। बग पूरी प्रस्तुति से बहुत परेशान है और इसे बहुत कम करता है (कम से कम मेरे लिए)। किसी और ने इसे पहले देखा? स्पष्ट करने के लिए
संपादित करें: यह वास्तविक li तत्व नहीं है कि "बुख़ार" यह यह के भीतर पाठ कि थोड़ा लेकिन काफ़ी हिला एनीमेशन रन के रूप में बाएं से दाएं बहुत जल्दी से है। मैं उलझन में हूं।
संपादित दो: सीएसएस के साथ एक सा नगण्य अब मैं केवल (मेरे लिए 21.0.1180.60 बीटा मी) क्रोम में प्रभाव पुन: पेश कर सकते हैं के बाद। फ़ायरफ़ॉक्स में यह इरादे के रूप में काम करता है। यह आईई में भी बहुत अच्छा काम करता है। बहुत विडंबना है कि क्रोम (आमतौर पर इस सामान के साथ महान) मुझे अब परेशानी दे रहा है। बालों को बाहर खींचता है, सैनिटी
यहां मेरा HTML है जो इसके निचले हिस्से तक पहुंचने में मदद करता है। हमने ChrisFrancis 'jsFiddle में समस्या का पुनरुत्पादन किया है।
<nav>
<ul class="nav">
<li class="one">
<a href="homeandnews/">
<span class="title">Home and News</span>
<br/>
<span class="subtitle">Learn more about me and read general updates!</span>
</a>
</li>
</ul>
<nav>
मैं पूरी तरह से स्टंप हूं। यह क्रोम/वी 8 जेएस इंजन में भी एक बग हो सकता है और इसके बारे में हम कुछ भी नहीं कर सकते हैं।
मैं इस व्यवहार को नहीं दिख रहा। शायद जब मैंने कोशिश की तो यह गर्म था? –
मैंने अभी आपको फ़ायरफ़ॉक्स में पृष्ठ देखा है। कोई समस्या नहीं, यह ठीक काम कर रहा है। आपके द्वारा उल्लिखित झटके प्रभाव को नहीं देख सका। – SexyBeast
हाहा, महान टिप्पणी। जब आप किसी भी 'li' तत्वों पर होवर करते हैं और वे चौड़ाई को एनिमेट करते हैं, तो उनके भीतर का पाठ बाएं से दाएं वास्तव में विचित्र रूप से shivers। स्क्रीन के दाईं ओर बारीकी से देखो। एकमात्र तरीका मैं आपको दिखा सकता हूं एक वीडियो है। मैंने कई मशीनों पर कोशिश की है और एक ही प्रभाव को अजीब तरीके से प्राप्त किया है। मैं उलझन में हूं। यह वास्तविक 'li' तत्व नहीं है जो shivers, यह इसके अंदर पाठ है। मैं सवाल स्पष्ट कर दूंगा। – wnajar