0

アニメーションを作ろうとしています。デモ: http://jsfiddle.net/pVTR7/9/

$('a.hide').click(function(){
    $('.left').animate({'width':'0%'}, 1000);    
    $('.right').animate({'width':'100%'}, 1000);
});

$('a.reset').click(function(){
    $('.left').animate({'width':'50%'}, 1000);    
    $('.right').animate({'width':'50%'}, 1000);
});

説明: 幅 50% の異なるコンテンツを持つ 2 つの異なる領域。「クリック」をクリックすると、左側の領域が非表示になり、右側の領域が全幅になります。[リセット] をクリックすると、左側の領域がスライドインされ、両方の領域が 50% の幅になります。(デモを見る)

問題: 左の領域を非表示にすると、アニメーション中に右の領域が飛び降りる!! リセットすると、両方の領域の間にスペースがなくてもすべてが正常に機能します（そうあるべきです）

ブラウザによって扱いが異なります。Safari -> 右側エリアが下にジャンプします。Firefox -> エリア間のスペース

絶対位置を使用できますが、コンテンツの高さを常に確認し、この高さをコンテナーに追加する必要があります。

4

2 に答える 2

0

取引は次のとおりです。

http://jsfiddle.net/pVTR7/19/

幅を変更して、0％ではなく0に減らす必要がありました

$('a.hide').click(function(){
    $('.left').animate({'width':'0'}, 1000);    
    $('.right').animate({'width':'100%'}, 1000);
});

.rightはfloat：leftに設定する必要がありました。

.right {
    width: 50%;
    height: 50%;
    float: left;
    background: #ccc;
}

お役に立てれば！

于 2012-10-25T11:33:15.513 に答える
0

これを使用できます

$('a.hide').click(function(){
    var the_width = $(this).parent().width();
    $('.left').animate({'width':the_width-the_width}, 1000);    
    $('.right').animate({'width':the_width}, 1000);
});

$('a.reset').click(function(){
    var the_width = $(this).parent().width() / 2;
    $('.left').animate({'width':the_width }, 1000);    
    $('.right').animate({'width': the_width}, 1000);
});​

http://jsfiddle.net/raghurocks/pVTR7/18/

フローティングを使用している場合は、直接値を指定しないでください。変数を使用して指定することをお勧めします。これが役立つことを願っています D:

于 2012-10-25T11:28:43.917 に答える