0

私は短いjqueryを使用しています。これは、画面外から親div内の目的の場所に移動しているように見えるdivをアニメーション化するだけです。

$(document).ready(function()
{$(".tv").animate({marginLeft:"50px"},700);

画面外で開始するために、親divがmax-width値とmin-width値で画面の横に到達することを確認しました。次に、子divをmargin-left 100％に設定しました。これは、親の現在の幅に相対的であると想定していましたが、明らかにそうではありません。最大幅では、子は親の端から始まり、オーバーフローの問題はありません。ただし、最小幅が使用されている場合、またはウィンドウがそれほど広くない場合でも、子は最大幅の位置からアニメートし、オーバーフローを作成します。

.col2 {
position:relative;
max-width:1200px;
min-width:400px;
height:600px;
margin-left:0px;
float:left;
overflow:hidden;
}

.tv {
margin-left:100%;
height:224px;
width:374px;
background-image:url('image/tv.png');
display:block;
}

これはパーセンテージを使用してシームレスに機能することを私は知っていますが、オプションではない限り、画面の左側に同じ幅を維持する必要がある列があります。また、ドキュメント全体のオーバーフローを削除しないようにしたいと思います。

親の最大幅ではなく、親の現在の幅に一致するように子のプロパティを設定するために使用できるjQueryまたはjavascriptが数行あると思いますが、現在の幅を測定する方法がわかりません。それ以外に、アニメーション化時にオーバーフローを無効にする以外の解決策はありませんが、それは理想的ではないようです。

助言がありますか？

4

1 に答える 1

0

.tv を position:absolute に設定すると、ボックス モデルから削除され、親 div のサイズが変更されなくなります。ばかげた左の値を指定すると、ページの読み込み時に画面外にレンダリングされます。

.tv {
height:224px;
width:374px;
background-image:url('image/tv.png');
position: absolute;
left: 10000px
}

次に、JS を使用して左の値をアニメーション化すると、オーバーフローの問題を引き起こすことなく同じ効果が得られます。アニメーション化する前に、左の値を親divの幅に設定するため、初期化されたばかげた左の値からアニメーション化を開始しません。

$(document).ready(function () {
    $(".tv")
        .css("left", $(".col2").width())
        .animate({left:"50px"},700);
});
于 2012-08-12T13:40:31.483 に答える