javascript - jquery转到没有动画的页面

Question

我有这样的jQuery代码：

var pageWidth = 230;
var sliderStartPosition = 0;
var sliderPageWidth = pageWidth;

function goToPage(slideNum){
    var offset = (slideNum-1) * sliderPageWidth;
    $('#js_slides').animate({left:'-'+offset+'px'}, 500, function(){
        $('#js_slides li').each(function(){ this.scrollTop = 0; });
    });
    return false;

}

function goToPageWithoutAnimation(slideNum){
    var offset = (slideNum-1) * sliderPageWidth;
    //code here
}

这是CSS：

div.sliderContainer {
    width: 230px; /*width of one page to slide*/
    overflow: hidden;
}

div.sliderContainer ul {
    position: relative;
    width: 690px;
    list-style: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

div.sliderContainer ul li{
    float: left;
    width: 210px;
    height: 380px;
    overflow: auto;
    padding: 10px;
}

我需要你的帮助，如何在没有动画的情况下进入页面。请帮我。

Answer 1

替换animate为css：

$('#js_slides').css({left:'-'+offset+'px'});
$('#js_slides li').each(function(){ this.scrollTop = 0; });

Answer 2

您可以使用css代替animate：

$('#js_slides').css({left:'-'+offset+'px'});
$('#js_slides li').each(function(){ this.scrollTop = 0; });

Answer 3

如果您想保留您拥有的代码（而不是采用替代方法），那么您可以将动画时间（当前 = 500 毫秒）减少到零，这将产生您想要看到的结果。

像这样：

 $('#js_slides').animate({left:'-'+offset+'px'}, 0, function(){
        $('#js_slides li').each(function(){ this.scrollTop = 0; });
    });