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

使用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放在中心？

Fiddle

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

Answer 1

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

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

我想，为什么不让jQuery的隐藏功能为我们做一些动画呢？这肯定可以更好地发挥作用，但它传达了这种想法。

<强>的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函数，假设它还没有。{/ p>

重复div然后做一个水平滚动

1 个答案: