jquery - 两个元素的并行动画，其中一个元素的宽度取决于另一个元素的最终宽度

Question

假设我们有两个divs，第二个div必须和第一个一样宽。如果我只是获得第一个并使用属性width设置第二个，它就可以工作，因为first是已知的。但是，它不知道。我必须等到第一个运行完毕。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);
}

Answer 1

如果我完全理解你的问题，这比我之前在评论中发布的样本更接近你想要的。

该函数可用于启用自定义动画类型或在动画发生step时更改动画（即基于当前动画width的动态设置）。该变量将具有每一步的计算宽度。#bwidth#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>

Answer 2

可能我也没有理解问题，但希望你需要这样的代码：

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 );
});

小提琴。