JQuery.animate（）在一些瀏覽器上以不同的速度移動div

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/