Question

我最近开始使用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();
});

您可以在行动here

中看到它

Answer 1

动画取决于定时中断。无法确保准确的时间安排，因此根据实施情况，两个滑块的时间可能会有所不同。

如果您只使用一个滑块元素，则不会遇到该问题。它还简化了代码。这样做的方法是复制滑块元素（使用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/

JQuery.animate（）在某些浏览器上以不同的速度移动div

1 个答案: