javascript - 函数 .animate 百分比不起作用

Question

我的网站上有一个左右导航按钮，但是当我尝试使用百分比时它不起作用，它只接受其中的像素。

HTML:

<span class='leftArrow' id="left" value='left'><i class="fa fa-chevron-left fa-2x"></i></span>
<span class='rightArrow' id="right" value='right'><i class="fa fa-chevron-right fa-2x"></i></span>

JS:

$(function () {

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        $(".wrapper").stop().animate({ scrollLeft: dir + '100%' }, 1000);
    });

});

CSS:

.wrapper {
    height: 100%;
    right: 0%;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}

谁能给我一盏灯？ 谢谢

Answer 1

scrollLeft 只接受像素见:

http://www.w3schools.com/jsref/prop_element_scrollleft.asp

尝试:

$(function () {

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        var wid = $(".wrapper").width();
        $(".wrapper").stop().animate({ scrollLeft: dir + wid  }, 1000);
    });

});