我正在使用下面的代码创建一个带有滑动背景图像的全宽全高网站。在 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>最佳答案
我发布的代码现在运行良好。似乎所有浏览器都修复了错误。
关于javascript - 使用 chrome 应用 jQuery 动画时出现意外的摇晃效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36984057/