jquery - 图像在动画上发抖

我写了一个小脚本来为鼠标滚轮上的列表元素添加动画

的HTML

<div id="scroll">
    <ul>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
    </ul>
</div>

jQuery的

$.fn.scroll = function () {
var $this = $(this);
var $list = $(this).find('ul');
var $lis = $list.find('li');
var count = $lis.length;
var direction,
currentSlidePosition;

$this.addClass('scroll');
$list.addClass('slides-list');
$lis.addClass('slide');
$lis.filter(':first').addClass('current');
$lis.filter(':not(:first)').addClass('past');

var scrollHeight = $lis.eq(0).height();

function gotoSlide(direction) {
    currentSlidePosition = $lis.filter('.current').index();

    if ((direction === 1 && currentSlidePosition === 0) || (direction === -1 && currentSlidePosition === count - 1)) {
        return;
    }

    $lis.removeClass('current');
    $lis.eq(currentSlidePosition - direction).removeClass('past prev').addClass('current');
    $lis.filter('.current').prevAll().addClass('prev');
    $lis.filter('.current').nextAll().addClass('past');
    console.log($list.scrollTop())
    $list.animate({
        scrollTop: (direction === -1) ? $list.scrollTop()+scrollHeight : $list.scrollTop()-scrollHeight
    }, {
        duration: 600
    });
}

$this.on('mouseenter', function () {
    var $this = $(this);

    $this.bind('mousewheel', function (e) {
        if ($list.is(':animated')) {

            return;
        }

        if (e.originalEvent.wheelDelta > 0) {
            direction = 1; //up
        } else {
            direction = -1; //down
        }

        gotoSlide(direction);
    });
});
};

$(document).ready(function () {
    $('#scroll').scroll();
});

http://jsfiddle.net/m5unj2wu/15/

但是在每个滚动背景上，背景图像都发抖和抽搐，看起来很难看。有什么办法可以解决？

最佳答案

您的滚动与浏览器自身的滚动竞争，因此您需要告诉它不要尝试自行滚动。您可以在事件处理程序中使用event.preventDefault()实现此目的：

$this.bind('mousewheel', function (e) {
   e.preventDefault();

请注意，即使较旧的IE版本本身不支持这些浏览器上的preventDefault()，jQuery provides this function for you，所以这是跨浏览器安全的。

http://jsfiddle.net/m5unj2wu/17/