Question

我正在使用以下代码创建一个带有滑动背景图像的全宽度全高度网站。它在Firefox和IE上运行良好，但在Chrome和Safari上，动画期间背景抖动。我还注意到动画的速度越来越快（不是实际的var，但它似乎在一段时间之后似乎移动得更快）关于如何修复它的任何想法或者可能是一个完全避免动画（）的新解决方案？

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

Answer 1

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

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

1 个答案: