更改后获取div宽度值

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

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

Try to get value of div width after finish of its animation. For example when you click the circle3 and line width became 100px - something should happend with circle1, when line goes to 230px - something should happent with circle2.

在完成动画后尝试获取div宽度的值。例如，当你点击circle3并且线宽变为100px时 - 某些事情应该发生在circle1上，当行变为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');
      });
    });

1 个解决方案

#1

You need to put your width code into each of the callback events that happen when animate completes! They are asynchronous operations.

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

Your tests for specific widths are then pointless (as they will be at those widths on completion).

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

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

});

Update: http://jsfiddle.net/TrueBlueAussie/fs5Ya/4/

You wanted to run the previous links in sequence, so you needs to nest that same code for each previous section. e.g. circle 3 click animates to circle 1, then circle 2 then circle 3:

您希望按顺序运行以前的链接，因此您需要为每个前一部分嵌套相同的代码。例如圈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');
            });
        });
    });
});

There is a shorter alternative (but more complicated), running 1, 2 or 3 of them in parallel with different start (delay) times, but this is clearer for now.

有一个较短的替代方案（但更复杂），在不同的启动（延迟）时间内并行运行1,2或3个，但现在这个更清楚。