jquery animate（）和谷歌浏览器问题 [英] Jquery animate() and google chrome issues

问题描述

我在谷歌浏览器中遇到了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（）{ （＃highlight，{duration：1000}，1500，function（）{
 
 $（＃hoverText）。 animate（{visibility：hidden，opacity：hide，left：0％}，500，function（）{
 $（＃hoverText）.css（left，100％ ）; 
 
}）; 
}）; 
}）; 
 
  

解决方案

问题是 100％ style left 这里使用的CSS属性vs px 属性（用 - = 和 100％，chrome将它解释为 0 像素缺少一个有效值......这意味着它正在工作，但离开可见区域的左侧）。为了消除跨浏览器的问题，我建议坚持使用其中一个或另一个......并且由于您想要在 - =

$ b 下面是您的示例已更改，以便设置<$ c $基于容器的宽度：

$ b

  $（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 b 
 $ b $（this）.animate（
 visibility：hidden，
 opacity：hide，
 left：$ 
}）; 
}）; 
}）; 
} 
  

你可以在这里测试，这个版本可以跨浏览器使用。

i'm having a problem with jquery and animate() in google Chrome. I have a box which is initially hidden and positioned on the right outside the screen. When a box is clicked the hidden box becomes visible and animate from right to the center, it stops and blink, then and then it starts moving again to the left side of the screen and disapper. This thing works on Explorer and Firefox but not on Chrome.

This is the link: http://test.gianlucaugolini.it/4545.html

And this is the code:

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

    });
        });
        });
}

解决方案

The issue is the 100% style left CSS properties vs the px properties in use here (with -= and 100%, chrome is interpreting it as 0 pixels absent a valid value...meaning that it's working, but way off to the left of the visible area).

To eliminate the issue cross-browser, I recommend sticking with one or the other...and since you want to animate in a -= style, I'd say pixels is the way to go here.

Here's your example changed so that it that sets the left based on the container width:

$(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, this version will work cross-browser.

这篇关于jquery animate（）和谷歌浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！