函数.动画百分比不起作用

Function .animate in percentage not working

本文关键字：不起作用 百分比 动画 函数      更新时间：2023-09-26

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

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%;
}

有人能给我一盏灯吗？感谢

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);
    });
});
相关文章：