在應用jQuery動畫效果時出現意想不到的晃動效果

我正在使用下面的代碼創建具有滑動背景圖像的全寬全高網站。使用Firefox和IE瀏覽器都可以正常工作，但在Chrome和Safari中，動畫期間背景會晃動。我還注意到動畫的速度越來越高（不是實際的變化，但它似乎在一段時間之後會更快地移動）關於如何修復它的想法或者可能是完全避免animate（）的新解決方案？在應用jQuery動畫效果時出現意想不到的晃動效果

$(function() { 
 

 
    //settings for slider 
 
    var width = '100%'; 
 
    console.log(width) 
 
    var animationSpeed = 2000; 
 
    var pause = 5000; 
 
    var currentSlide = 1; 
 

 
    //cache DOM elements 
 
    var $slider = $('#slider'); 
 
    var $slideContainer = $('.slides', $slider); 
 
    var $slides = $('.slide', $slider); 
 

 
    var interval; 
 

 
    function startSlider() { 
 
     interval = setInterval(function() { 
 
      $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 
 
       if (++currentSlide === $slides.length) { 
 
        currentSlide = 1; 
 
        $slideContainer.css('margin-left', 0); 
 
       } 
 
      }); 
 
     }, pause); 
 
    } 
 
    function pauseSlider() { 
 
     clearInterval(interval); 
 
    } 
 

 
    $slideContainer 
 
     .on('mouseenter', pauseSlider) 
 
     .on('mouseleave', startSlider); 
 

 
    startSlider(); 
 

 

 
});

html,body { 
 
\t background-color:black; 
 
\t height: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
.container { 
 
\t width: 100%; 
 
\t min-height: 100%; 
 
\t height: 100%; 
 
\t padding: 0; 
 
} 
 

 
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.row { 
 
\t padding: 0; 
 
} 
 
.header { 
 
\t background-color: white; 
 
\t height: 85px; 
 
} 
 

 
#slider { 
 
    width: 100%; 
 
    height: calc(100% - 250px); 
 
    overflow: hidden; 
 
} 
 

 
#slider .slides { 
 
    display: block; 
 
    width: 600%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#slider .slide { 
 
    float: right; 
 
    list-style-type: none; 
 
    width: 16.666666667%; 
 
    height: 100%; 
 
} 
 

 
.footer { 
 
\t color: white; 
 
\t height: 165px; 
 
    padding: 72px 0 0 470px; 
 
} 
 

 
.slide1 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;} 
 
.slide2 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;} 
 
.slide3 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;} 
 
.slide4 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;} 
 
.slide5 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}

<body> 
 
    <div class="container"> 
 
     <div class="header"> 
 
      <img class="logo" src="http://placehold.it/156x33"> 
 
     </div> 
 
     <h1>Proin bibendum ligula massa nec maximus.</h1> 
 
     <div id="slider"> 
 
      <ul class="slides"> 
 
       <li class="slide slide1"></li> 
 
       <li class="slide slide2"></li> 
 
       <li class="slide slide3"></li> 
 
       <li class="slide slide4"></li> 
 
       <li class="slide slide5"></li> 
 
       <li class="slide slide1"></li> 
 
      </ul> 
 
     </div> 
 
     <div class="footer"> 
 
      <div> 
 
       <ul> 
 
        <li>Lorem ipsum dolor sit</li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2016-05-02 Muaaz

jQuery不是爲動畫構建的，所以它有相當基本的實現。表現可能很糟糕。我會推薦Velocity.js，因爲它是以性能爲基礎構建的。 –

我試過速度。我有同樣的效果，但不太明顯！ – Muaaz

我發佈的代碼現在工作的罰款。似乎所有瀏覽器修復了這些錯誤。

來源

2017-03-02 15:08:41 Muaaz

在應用jQuery動畫效果時出現意想不到的晃動效果

回答

相關問題