Jquery animate () и проблемы с Google Chrome - PullRequest
Новая
       12

Jquery animate () и проблемы с Google Chrome

5 голосов
/ 17 сентября 2011

У меня проблема с jquery и animate () в Google Chrome.У меня есть коробка, которая изначально скрыта и расположена справа за экраном.При щелчке по блоку скрытый блок становится видимым и анимированным справа от центра, он останавливается и мигает, затем снова начинает перемещаться в левую часть экрана и исчезает.Эта штука работает в 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 Ответ

2 голосов
/ 18 сентября 2011

Проблема заключается в свойствах 100% стиля *1001* против свойств 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
            });
        });
    });
}

Вы можете проверить его здесь , эта версия будет работатькросс-браузер.

...