更改后获取div宽度值

Question

http://jsfiddle.net/fresa150/fs5Ya/1/

在完成动画后尝试获取div宽度的值。 例如，当你点击circle3并且线宽变为100px时 - 某些事情应该发生在circle1上，当line转到230px时 - circle2会发生一些事情。

<div id="menu-holder">
  <div id="menu">
    <div id="line-holder">
      <div id="line"></div>
    </div>
    <div id="circle1" class="c"></div>
    <div id="circle2" class="c"></div>
    <div id="circle3" class="c"></div>
  </div>
</div>

var load = $('#line');

    $('#circle1').click(function w(){
      load.animate({width:"100px"},1000, function(){
        $('#circle1').css('background','#840101');
      });

    });

    if(load.width() == 100) {
    alert('some thing should happend with circle1');
    }

    $('#circle2').click(function(){
      load.animate({width:"230px"},1000, function(){
        $('#circle2').css('background','#840101');
      });
    });

    if(load.width() == 230) {
    alert('some thing should happend with circle2');
    }


    $('#circle3').click(function(){
      load.animate({width:"350px"},1000, function(){
        $('#circle3').css('background','#840101');
      });
    });

Answer 1

您需要将宽度代码放入动画完成时发生的每个回调事件中！它们是异步操作。

您对特定宽度的测试是毫无意义的（因为它们将在完成时达到那些宽度）。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/fs5Ya/3/

$(document).ready(function () {

    var load = $('#line');

    $('#circle1').click(function w() {
        load.animate({
            width: "100px"
        }, 1000, function () {
            $('#circle1').css('background', '#840101');
            alert('some thing should happend with circle1');
        });
    });

    $('#circle2').click(function () {
        load.animate({
            width: "230px"
        }, 1000, function () {
            $('#circle2').css('background', '#840101');
            alert('some thing should happend with circle2');
        });
    });


    $('#circle3').click(function () {
        load.animate({
            width: "350px"
        }, 1000, function () {
            $('#circle3').css('background', '#840101');
        });
    });

});

更新：http://jsfiddle.net/TrueBlueAussie/fs5Ya/4/

您希望按顺序运行以前的链接，因此您需要为每个前一部分嵌套相同的代码。例如圈3点击动画圈1，然后圈2然后圈3：

$('#circle3').click(function () {
    load.animate({
        width: "100px"
    }, 1000, function () {
        $('#circle1').css('background', '#840101');
        load.animate({
            width: "230px"
        }, 1000, function () {
            $('#circle2').css('background', '#840101');
            load.animate({
                width: "350px"
            }, 1000, function () {
                $('#circle3').css('background', '#840101');
            });
        });
    });
});

有一个较短的替代方案（但更复杂），以不同的开始（delay）次并行运行1,2或3个，但现在这个更清楚。