jquery - 让 animate() 考虑 CSS 填充

Question

我一直在调整我在网上找到的一个 jQuery 插件，它创建了一个无限滚动的图像“选取框”，但是，我在获取 animate() 函数来解释 CSS 时遇到了问题填充。

jsFiddle:http://jsfiddle.net/gpdb5Lag/

这是 CSS:

ul.slide {
    margin:0;
    padding:0;
    height:66px;
    list-style-type:none;
}
ul.slide li {
    /*padding: 0 15px;*/
    float:left;
    list-style-type:none;
}

这里是 jQuery 本身:

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                var _this = $(this);
                _this.data('marquee', options);
                var _li = $('>li', _this);
                _this.wrap('<div class="slide_container"></div>').height(_this.height()).hover(function () {
                    if ($(this).data('marquee').stop) {
                        $(this).stop(true, false);
                    }
                },function () {
                    if ($(this).data('marquee').stop) {
                        $(this).marquee('slide');
                    }
                }).parent().css({
                    position: 'relative',
                    overflow: 'hidden',
                    'height': $('>li', _this).height()
                }).find('>ul').css({
                    width: screen.width * 2,
                    position: 'absolute'
                });
                for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
                    _this.append(_li.clone());
                }
                _this.marquee('slide');
            });
        },slide: function () {
            var $this = this;
            $this.animate({
                'left': $('>li', $this).width() * -1
            },
            $this.data('marquee').duration,
            'swing',function () {
                $this.css('left', 0).append($('>li:first', $this));
                $this.delay($this.data('marquee').delay).marquee('slide');
            });
        }
    };
    $.fn.marquee = function (m) {
        var settings = {
            'delay': 500,
            'duration': 1200,
            'stop': false
        };
        if (typeof m === 'object' || !m) {
            if (m) {
                $.extend(settings, m);
            }
            return methods.init.apply(this, [settings]);
        } else {
            return methods[m].apply(this);
        }
    };
})(jQuery);
$(document).ready(function () {
    $('.slide').marquee();
});

我相信是 slide: 导致了问题( fiddle 中的第 30 行)，而且我知道 swing 不会给我线性动画，但是简单地将其更改为 linear 没有帮助。

如果您取消注释 CSS 行 /*padding: 0 15px;*/，您将看到问题。

Answer 1

使用outerWidth() :

'left': $('>li', $this).outerWidth() * -1

-jsFiddle-