javascript - 复制 div 然后水平滚动

Question

我正在尝试克隆，#main然后将我的 ajax 结果放在那里（隐藏），这样做之后，我将使其水平滚动到左侧，隐藏当前的结果，然后显示克隆。

HTML：

<div class="container">
    <div id="main">
        <p>Click here to start</p>
    </div>
</div>​

CSS：

#main{
    width:460px;
    min-height:200px;
    background:#3F9FD9;
    margin:0 auto;
}
.container {
    position:relative;
}

​</p>

Javascript：

$('#main').click(function(){
    //clone.html(data)
    var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
            {position:'absolute',right:'0','margin-right':'-460px',top:0}
        ).attr('class','love').insertAfter($(this));
    $(this).css({position:'relative'});
        var width = $(window).width()-$(this).outerWidth()/2;
    $('#main').animate({'left':'-'+width},4000);
});

但我坚持如何让#main动画向左移动并将第二个 div 定位在中心的想法？

---

小提琴

编辑：现在我只关注如何为克隆设置动画。

Answer 1

我对你的问题采取了不同的方法，这是你要找的吗？

http://jsfiddle.net/3s7Fw/5/show

我想，与其自己做一些动画，为什么不让 jQuery 的 hide 函数为我们做呢？这肯定可以做得更好，但它传达了这个想法。

JavaScript

$('.container').on('click', '.loaded-content', function(){
    $this = $(this);

    //clone.html(data)
    var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');

    $this.after(clone);
    $this.hide('slow');
});​

HTML

<div class="container">
    <div id="main" class="loaded-content">
        <p>Click here to start</p>
    </div>
</div>​

CSS

#main, .loaded-content{
    width:460px;
    min-height:200px;
    background:#3F9FD9;
    margin:0 auto;
    float: left;
}
.container {
    position:relative;
    width: 920px;
}

如果这不是所需的功能，那么您可能对滑块感兴趣。已经有许多不错的滑块插件可供您使用。困难的部分可能是向addNewSlide您选择的滑块添加一个功能，假设它还没有。