Question

我一直在调整我在网上找到的一个jQuery插件，它创建了一个无限滚动的“选框”图像，但是，我无法让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:导致问题（小提琴中的第30行），我知道swing不会给我一个线性动画，而只是将它改为{{1没有帮助。

如果取消注释CSS行linear，您将看到问题。

Answer 1

使用outerWidth()：

public class BasePage : System.Web.UI.Page
{
    protected override void InitializeCulture()
    {
        if (!string.IsNullOrEmpty(Request["lang"]))
        {
            Session["lang"] = Request["lang"];
        }
        string lang = Convert.ToString(Session["lang"]);
        string culture = string.Empty;
        if (lang.ToLower().CompareTo("en") == 0 || string.IsNullOrEmpty(culture))
        {
            culture = "en-US";
        }
        if (lang.ToLower().CompareTo("fr") == 0)
        {
            culture = "fr-FR";
        }
        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(culture);
        Thread.CurrentThread.CurrentUICulture = new CultureInfo(culture);

        base.InitializeCulture();
    }
}

-jsFiddle-

Answer 2

您必须将填充值（15 + 15 = 30px）添加到动画：

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

让animate（）来考虑CSS填充

2 个答案:

-jsFiddle-