Jquery एनिमेट() और Google क्रोम मुद्दे

Question

मुझे Google क्रोम में jquery और एनिमेट() के साथ कोई समस्या है। मेरे पास एक बॉक्स है जो प्रारंभ में छिपा हुआ है और स्क्रीन के बाहर दाईं ओर स्थित है। जब कोई बॉक्स क्लिक किया जाता है तो छुपा बॉक्स दिखाई देता है और दाएं से केंद्र तक एनिमेट हो जाता है, यह बंद हो जाता है और फिर झपकी देता है, फिर फिर यह स्क्रीन के बाईं ओर फिर से हिलना शुरू कर देता है। यह बात एक्सप्लोरर और फ़ायरफ़ॉक्स पर काम करती है लेकिन क्रोम पर नहीं।

यह लिंक है: http://test.gianlucaugolini.it/4545.html

और इस कोड है:

function test(){ 

    var scaleX = $("#container").width()/2 + $("#hoverText").width()/2; 

    $("#hoverText").animate({visibility:"visible",opacity:"show",left:"-="+scaleX+"px"},500,function(){ 

    $("#hoverText").effect("highlight",{duration:1000},1500,function(){ 

    $("#hoverText").animate({visibility:"hidden",opacity:"hide",left:"0%"},500,function(){ 
     $("#hoverText").css("left","100%"); 

    }); 
     }); 
     }); 
} 

Answer 1

मुद्दा बनाम उपयोग यहाँ px गुण 100% शैली left सीएसएस गुण (-= और 100% के साथ है, क्रोम इसे 0 पिक्सेल के रूप में व्याख्या कर रहा है, वैध मान अनुपस्थित है ... जिसका अर्थ है कि यह काम कर रहा है, लेकिन दृश्य क्षेत्र के बाईं ओर रास्ता)।

समस्या क्रॉस-ब्राउज़र को खत्म करने के लिए, मैं एक या दूसरे के साथ चिपकने की सलाह देता हूं ... और चूंकि आप -= शैली में एनिमेट करना चाहते हैं, तो मैं कहूंगा कि पिक्सल यहां जाने का तरीका है।

यहाँ अपने उदाहरण बदल गया है इतना है कि यह है कि left कंटेनर चौड़ाई के आधार पर तय करता है:

$(document).ready(function() { 
    $("#header_title").bind("click",test); 
}); 

function test(){ 
    var cw = $("#container").width(); 
    var scaleX = cw/2 + $("#hoverText").width()/2; 

    $("#hoverText").css("left", cw).animate({ 
     visibility: "visible", 
     opacity: "show", 
     left: "-="+scaleX+"px" 
    }, 500, function() { 
     $(this).effect("highlight",{ 
      duration:1000 
     }, 1500, function() { 
      $(this).animate({ 
       visibility: "hidden", 
       opacity: "hide", 
       left: 0 
      }); 
     }); 
    }); 
} 

You can test it here, इस संस्करण पार ब्राउज़र काम करेंगे।