Jquery animate()和谷歌浏览器问题

时间:2011-09-17 15:29:24

标签: jquery google-chrome jquery-animate

我在google Chrome中遇到了jquery和animate()的问题。 我有一个最初隐藏的盒子,位于屏幕右侧。 单击一个框时,隐藏框变为可见,并从右侧到中心动画,它停止并闪烁,然后它再次开始移动到屏幕的左侧并消失。 这个东西适用于资源管理器和Firefox,但不适用于Chrome。

这是链接: 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%");

    });
        });
        });
}

1 个答案:

答案 0 :(得分:2)

问题是100%样式left CSS属性与此处使用的px属性(使用-=100%,Chrome将其解释为0像素缺少有效值...意味着它正在工作,但是在可见区域的左侧。

为了消除跨浏览器的问题,我建议坚持使用其中一个......并且由于你想要以-=风格制作动画,我会说像素是这里的方式。< / p>

以下是您的示例已更改,以便根据容器宽度设置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,此版本将跨浏览器工作。