2011-09-17 25 views
5

google Chrome'da jquery ve animate() ile ilgili bir sorun yaşıyorum. Ekranın sağında başlangıçta gizlenmiş ve konumlandırılmış bir kutum var. Bir kutu tıklatıldığında, gizli kutu görünür hale gelir ve sağdan merkeze doğru canlandırır, durur ve yanıp söner, ardından ekranın sol tarafına yeniden hareket etmeye başlar ve sersemletir. Bu şey Explorer ve Firefox'ta çalışıyor, ancak Chrome'da çalışmıyor.Jquery animate() ve google chrome sorunları

Bu link: http://test.gianlucaugolini.it/4545.html

Ve bu kodu şöyledir:

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%"); 

    }); 
     }); 
     }); 
} 

cevap

2

konu -= ve 100% burada kullanımda px özellikleri vs 100% tarzı left CSS özellikleri (olduğu, krom, geçerli bir değere sahip olmayan 0 piksel olarak yorumlanır. Bu, çalıştığı anlamına gelir, ancak görünen alanın solunda bir yol demektir).

Çapraz tarayıcı sorununu ortadan kaldırmak için, bir veya diğeriyle yapışmayı öneriyorum ... ve bir -= stilinde animasyon uygulamak istediğinizde, piksellerin buraya gitmenin yolu olduğunu söyleyebilirim. o kabın genişliğine göre left belirlediğini böylece

İşte örnek değişti:
$(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

, bu sürüm çapraz tarayıcı çalışacaktır.

+0

Teşekkürler! iyi çalışıyor! – TheWiseJah

+0

Sadece benim ilk css "alt: 0px" belirtilen aynı sorunu vardı ama ben "üst: + = 2500" gibi canlandırma için jquery kullanıyordum. "Alt: - = 2500" değerini okumak için js'yi değiştirmek tutarlı oldu ve şimdi Chrome/IE'de çalışıyor. Üstte olmak yerine – Heraldmonkey

+0

, {{padding-top-top \ "kullanın):" + = 15px "}' –