Unbeabsichtigter Schütteleffekt beim Anwenden von jQuery mit Chrom animieren

Ich benutze den unten stehenden Code, um eine vollständige Website in voller Höhe mit gleitenden Hintergrundbildern zu erstellen. Es funktioniert alles gut mit Firefox und IE, aber in Chrome und Safari zittert der Hintergrund während der Animation. Ich habe auch bemerkt, dass die Geschwindigkeit der Animation über die Zeit steigt (nicht die tatsächliche var, aber es scheint sich nach einer Weile schneller zu bewegen) irgendwelche Ideen, wie man es beheben kann oder vielleicht eine neue Lösung, um animate() vollständig zu vermeiden?Unbeabsichtigter Schütteleffekt beim Anwenden von jQuery mit Chrom animieren

$(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>

Quelle

2016-05-02 Muaaz

jQuery ist nicht zum Animieren, also hat es eher grundlegende Implementierung. Wahrscheinlich ist die Leistung einfach schlecht. Ich würde Velocity.js empfehlen, da es auf Leistung basiert. –

Ich versuchte die Geschwindigkeit. Ich habe den gleichen Effekt, aber weniger offensichtlich! – Muaaz

Der Code, den ich geschrieben arbeitet jetzt in Ordnung. Es scheint, dass alle Browser die Fehler behoben haben.

Quelle

2017-03-02 15:08:41 Muaaz

Unbeabsichtigter Schütteleffekt beim Anwenden von jQuery mit Chrom animieren

Antwort

Verwandte Themen