javascript - 给线加长动画

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。
                            
                        
                    
                
                                6年前关闭。
            
                    
我该如何在jquery中为行加长动画？我正在尝试连接两个div，随着div之一的移动，我需要使线动态。因此，我需要延长线。

最佳答案

<div id="a"></div>                                <!--div A-->
<div id="b"></div>                                <!--div B-->
<div id="line"></div>                             <!--Line -->

$("button").click(function () {
    var a = $("#a"),
        b = $("#b"),
        dW = b.offset().left - (a.offset().left),  //dX
        dH = b.offset().top - (a.offset().top),    //dY
        angle = Math.atan(dH / dW),                //angle
        length = Math.sqrt(dW * dW + dH * dH);     //length in between

    if(dW <0) angle += Math.PI;                    //some Math stuff

    $("#line").css({
        top: a.offset().top,                       //Where the line starts
        left: a.offset().left,
        width: 0,
        rotate: angle + "rad",                 //rotation (prefixes not included)
        transformOrigin: '0px 0px'
    }).animate({
        width: length                              //animation
    }, 3000);
});

实时演示：http://jsfiddle.net/DerekL/UwDgq/

关于javascript - 给线加长动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15318444/