让 animate() 考虑 CSS 填充

Question

我一直在调整我在网上找到的一个 jQuery 插件，它创建了一个无限滚动的 "marquee" 图像，但是，我无法获得 animate() 功能考虑 CSS 填充。

这里是 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

您必须将填充值 (15+15=30px) 添加到动画中：

$this.animate({
    'left': ($('>li', $this).width()+30) * -1
},

Answer 2

使用outerWidth():

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

让 animate() 考虑 CSS 填充

Getting animate() to account for CSS padding

css

jquery

jquery-animate

-jsFiddle-