1

私は自分の問題の解決策を思い付くことができません。だから私は見栄えの良いユーザーパネルを作るためのクールなアイデアを持っていますが、jqueryを正しく機能させる方法を理解することはできません;）。つまりね：

html:
<div id="content">
<div id="containerleft">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
</div>
</div>

JS:
$(".box").click(function(){
$(this).css({'position' : 'absolute'}).animate({
                width: '100%', 
                height : '100%'},300);
                          });

これがcssでどのように機能するかです：http： //jsfiddle.net/85mJN/1/

私が達成しようとしているのは、divのサイズを彼の位置から、親divのサイズに変更することです。これにより、効果が大きくなります。ご覧のとおり、.click divが左上隅に移動した後、親にフィットし、他の人を移動することですべてを支配します。アニメーションdivの.css（'z-index'： '999'）をいじってみましたが、それは失敗でした。主な目標は、divを移動せずに、元の位置から他のdivの上に拡張することです。

〜サンドマン

4

2 に答える 2

2 
$(".box").click(function(){

    var clone = $(this).clone().addClass('active');
    var parent = $(this).parent();
    var pos = $(this).position();

    $(this).append(clone);

    clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
        width: '100%', 
        height : '100%',
        top: 0,
        left: 0
    },300);


});

http://jsfiddle.net/85mJN/3/

追加されたボックスの絶対位置がコンテナからラップされるように、ボックス要素は静的な位置にある必要があることに注意してください。

アップデート：

ボックスがアクティブなときにクリックすると閉じるが追加されました。

http://jsfiddle.net/85mJN/4/

また、toggleClassでCSS3トランジションを使用する最良の方法を今でも考えています。必要なコードが少なく、フェイルセーフであり、ハードウェアアクセラレーションにより、複雑なdivを使用する場合にスムーズになります。古いブラウザについては心配しません。アニメーション化されませんが、大きなボックスが表示されます...

于 2013-03-19T00:43:56.773 に答える
0

例に示されている動きは、クリックされたdivをフローから削除し、他のdivがフロートされているため再調整した結果です。

簡単な解決策は、#containerleft{ overflow:hidden; ... }

ただし、それでもニーズが満たされない場合は、クローンを作成することもできます。

$('#containerleft').on("click", ".box", function(){

    var $this = $(this);

    console.log($this.css('position'));    
    if($this.css('position') === 'absolute'){ 
        $this.animate({width:'0px',height:'0px'},300);
        //$this.remove();
    }
    else {
        $this.clone().appendTo($this.parent()).css({'position' : 'absolute'}).animate({
                    width: '100%', 
                    height : '100%'},300);
    }


});

http://jsfiddle.net/e4NG5/2/

于 2013-03-19T00:55:49.590 に答える