我在 google Chrome 中遇到 jquery 和 animate() 问题。
我有一个最初隐藏的盒子,位于屏幕的右侧。
当单击一个框时,隐藏的框变得可见并从右到中心动画,它停止并闪烁,然后它开始再次移动到屏幕的左侧并消失。
这个东西适用于 Explorer 和 Firefox,但不适用于 Chrome。
这是链接:http://test.gianlucaugolini.it/4545.html 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%");
});
});
});
}
问题是100%
style left
CSS 属性对比px
这里使用的属性(与-=
and 100%
,chrome 将其解释为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
});
});
});
}
你可以在这里测试一下 http://jsfiddle.net/nick_craver/vEha2/,此版本将跨浏览器工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)