AJAX替换并横向滚动

Question

我已经找到了很多方法来加载和替换内容与ajax和隐藏/显示效果。

但我正在寻找一种方法将新内容滑入div中，而旧内容会滑出。

我想这需要在已经存在的内容之后附加加载的内容，但是如何水平对齐现有/加载的内容并在div中滚动？

有关好插件的任何建议吗？

Answer 1

创建滑动面板相对容易。首先，创建一个具有固定宽度的容器，该容器将隐藏溢出。然后你有一个移动面板，宽度大，即5000px，内部内容分别包含在div中。

HTML

<div id="container">

    <div id="panel">
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

</div>

CSS

#panel div {
    width: 300px;
    border: 1px solid black;
    float: left;
    height: 350px;
}

#panel {
   width: 5000px;
}

#container {
    overflow: hidden;
    width: 302px;
}

的jQuery

$(document).ready(function() {

    $('#panel').delay(2500).animate({
        marginLeft: '-=302px'
    }, 500);

});

我们将面板的左边距滑动到负值，因此它将整个面板向左移动了要滑入视图的内容宽度（在这种情况下为302像素）。

提供小提琴： http://jsfiddle.net/cMKbA/2/

Answer 2

我是位于http://nivo.dev7studios.com的Nivo Slider的粉丝。