1

2 つdivの があり、2 番目divは 1 番目と同じ幅でなければならないとします。最初のものを取得し、プロパティでwidth2番目を設定すると、最初のものはわかっているため、機能します。しかし、それは知られていません。最初の実行が完了するまで待たなければなりません。div.csswidthdiv.animate.animate

デモフィドル

#a
{
    background-color: green;
}

#b
{
    background-color: red;
}

<span id="a">aaa aa a a a a a aa</span>
<br />
<span id="b">bbb</span>

$(document).ready(function()
{
    // this works, but I dont want this
    $('#b').width ($('#a').width());

    // and this WONT work, because widht of #a is not yet calculated    
    $('#b').animate({
        'width' : $('#a').width()
    }, 1500);
}
4

2 に答える 2

1

私があなたの質問を完全に理解していれば、これは以前にコメントで投稿したサンプルよりもあなたが望むものにより近いものです.

このstep関数は、カスタム アニメーション タイプを有効にしたり、発生中のアニメーションを変更したりするのに役立ちます (つまり、アニメーション化されている電流にwidth基づい#bて動的に設定されます)。変数は、各ステップで計算された幅になります。width#anow#a

$(document).ready(function() {
  $('#a').animate({
    'width': $('#c').width()
  }, {
    duration: 1500,
    queue: false,
    step: function(now, fx) {
      $('#b').animate({
        'width': now
      }, {
        duration: 2500,
        queue: false
      })
    }
  });
});
#a {
  background-color: green;
}
#b {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="c">Some very lengthy content</span>
<br/>
<span id="a">Some lengthy content</span>

<br/>
<span id="b">Some content</span>

于 2013-09-01T16:00:46.667 に答える
0

私も質問を理解していなかったかもしれませんが、次のようなコードが必要になることを願っています:

HTML

<div id="firstDiv"></div>
<div id="secondDiv"></div>

CSS

#firstDiv
{
    width: 200px;
    height: 100px;
    background-color: Green;
}
#secondDiv
{
    width: 10px;
    height: 100px;
    background-color: red;
}

JQuery

$(document).ready(function(){
    var firstWidth = "300px"
    $("#firstDiv").animate({width: firstWidth}, 1000)
    $("#secondDiv").animate({width: firstWidth}, 1000 );
});

フィドル。

于 2013-09-01T14:50:23.230 に答える