二重線divを次に水平スクロールします

Question

私はクローンを表示しようとしています。それで私の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左にアニメーションし、2番目のdivを中央に配置？

---

Fiddle

EDIT：今私が唯一のクローンをアニメーション化する方法にこだわって。

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

これは希望FUNCされていない場合あなたはスライダーに興味があるかもしれません。そこには、すでにそこにあなたが使用できる良いスライダープラグインの数があります。難しい部分は、選択したスライダーにまだ関数を追加している可能性があります。