使用 chrome 应用 jQuery 动画时出现意外抖动效果答案

【问题标题】：Unintended shaking effect while applying jQuery animate with chrome使用 chrome 应用 jQuery 动画时出现意外抖动效果
【发布时间】：2016-05-02 13:49:00
【问题描述】：

我正在使用下面的代码创建一个带有滑动背景图像的全宽全高网站。它在 Firefox 和 IE 上都可以正常工作，但在 Chrome 和 Safari 上，背景在动画期间会晃动。我还注意到动画的速度随着时间的推移而增加（不是实际的 var，但它似乎在一段时间后移动得更快）关于如何修复它的任何想法或者可能是完全避免 animate() 的新解决方案？

$(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 {
	background-color:black;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.container {
	width: 100%;
	min-height: 100%;
	height: 100%;
	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 {
	padding: 0;
}
.header {
	background-color: white;
	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 {
	color: white;
	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>

【问题讨论】：

jQuery 不是为动画而构建的，因此它具有相当基本的实现。可能性能很差。我推荐 Velocity.js，因为它在构建时考虑到了性能。
我试过速度。我有同样的效果，但不太明显！

标签： javascript jquery html css web

【解决方案1】：

我发布的代码现在运行良好。似乎所有浏览器都修复了这些错误。

【讨论】：