JQuery.animate () перемещает div на разных скоростях в некоторых браузерах - PullRequest
Новая
       4

JQuery.animate () перемещает div на разных скоростях в некоторых браузерах

1 голос
/ 29 марта 2012

Я недавно начал использовать JQuery и создал небольшой слайдер для отображения логотипов спонсоров сайта и тому подобного. Мне показалось, что он работает правильно с помощью Firefox. Я решил загрузить сайт в Chrome, и он ведет себя довольно странно. Анимация выглядит нормально до тех пор, пока первый div (слайдер не разделен на два div, так что первый может перейти в конец, после того как он прошел его через div для маскировки) не появится на экране для второго (и каждого одновременного) прохода. Первый div, кажется, движется быстрее и обгоняет второй div. Есть идеи, что вызвало бы это? Похоже, это происходит только в Chrome и Safari. IE работал даже! 

$(document).ready(function () {
var s1 = $("div[name=s1]");
var s2 = $("div[name=s2]");
var release = 0;
var speed = 75; //px per sec
var interval = 100; //milliseconds per animation
var origSpeed = speed;

function slide() {
    release = 1 - release;
    if (release == 0) {
        return;
    }
    distance = "+=" + (parseInt(s1.width(), 10) + parseInt(s2.width(), 10)) + "px";
    if ((-1 * parseInt(s1.css("left"), 10)) > parseInt(s1.width(), 10)) {
        s1.css({left: distance});
    }
    if ((-1 * parseInt(s2.css("left"), 10)) > (parseInt(s1.width(), 10) + parseInt(s2.width(), 10))) {
        s2.css({left: distance});
    }
    slide_again();
}

function slide_again() {
    $("div[id=slider]").animate({left: "-=" + interval * (speed / 1000) + "px"}, interval, "linear", slide);
}

    $("div[id=slider]").hover(function() {
    speed = 0;
    }, function() {
        speed = origSpeed;
    });

    slide();
});

Вы можете увидеть это в действии здесь

1 Ответ

1 голос
/ 29 марта 2012

Анимация зависит от временных прерываний. Не гарантируется точное время, поэтому, в зависимости от реализации, время ваших двух ползунков может отличаться.

Если вы просто используете один элемент слайдера, вы не столкнетесь с этой проблемой. Это также немного упрощает код. Способ сделать это - скопировать элементы слайдера (используя jQuery), а затем анимировать половину ширины (предварительно заданную ширину) и начать заново: 

$(window).load(function() {
    var speed = 75; //px per sec

    // Get the width of the slider before you duplicate it
    var width = $('#slider').outerWidth();

    // Repeat the inner content by cloning and appending it to the end
    $('#slider').append($('#slider').children().clone());

    function slide() {
        // The duration takes into account the current position
        // in case you are starting from a hover-pause
        var curleft = $('#slider').position().left;
        var duration = (width+curleft) * 1000 / speed;
        $("#slider").animate({
            // Animate until original width slides off to left
            left: "-" + width + "px"
        }, duration, "linear", function() {
            // Reset to original position and start over
            $(this).css("left", "0px");
            slide();
        });
    }

    $("#slider").hover(function() {
        $('#slider').stop();
    }, function() {
        slide();
    });

    slide();
});

Вы также можете изменить ваше наведение на .stop() и slide() до тех пор, пока вы наберете немного дополнительной математики в своем звонке slide(), чтобы узнать, где вы находитесь.

Демо: http://jsfiddle.net/6Dxg6/

...