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

Posted 2023-05-08

【中文标题】Jquery animate() 和谷歌浏览器问题

【英文标题】：Jquery animate() and google chrome issues

【发布时间】：2011-11-19 07:52:26

【问题描述】：

我在 google Chrome 中遇到 jquery 和 animate() 的问题。 我有一个最初隐藏并位于屏幕右侧的框。 当一个盒子被点击时，隐藏的盒子变得可见并从右到中心动画，它停止并闪烁，然后它再次开始移动到屏幕的左侧并消失。 这个东西适用于 Explorer 和 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】：

问题在于100% 样式left CSS 属性与此处使用的px 属性（-= 和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
            );
        );
    );

You can test it here，这个版本可以跨浏览器使用。

【讨论】：

我刚刚遇到了同样的问题，我的初始 css 指定了“bottom:0px”，但我使用 jquery 来动画如下“top:+=2500”。将 js 更改为 "bottom:-=2500" 使其保持一致，现在它可以在 Chrome/IE 中使用。

而不是top，使用"padding-top":"+=15px"是相对的