일부 브라우저에서 JQuery.animate()가 다른 속도로 이동합니다

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/