0

私はクローンを作成しようとして#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を左にアニメートし、2番目のdivを中央に配置する方法についてのアイデアに固執していますか?

フィドル

編集:今、私はクローンをアニメートする方法に固執しています。

4

1 に答える 1

0

私はあなたの質問に対して別のアプローチをとったのですが、これはあなたが探しているものですか？

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。まだ機能がないと仮定します。

于 2012-05-05T05:45:31.163 に答える