javascript - 如何使用 jQuery 动画从上到下滑动不同的 div？

Question

我想将第一个 div 滑动到最后一个 div 与动画同步。 你能在 jquery 上帮助我吗？

$(function() {
    $('#switch').click(function() {
        $('#one').animate({top:$("#three").offset().top}); 


    });
});

jsfiddle

Answer 1

由于资料少，我制作了一个demo 4，大家试试看，

HTML

<div style="position:relative;">
    <div id="one" class="square">1</div>
    <div id="two" class="square">2</div>
    <div id="three" class="square">3</div>
    <div id="four" class="square">4</div>
</div>
<div class="clear"></div>
<br />
<button id="switch">switch positions</button>

CSS

#one {
    top:0;
    background:blue;
}
#two {  
    top:50px;
    background:red;
}
#three {
    top:100px;
    background:purple;
}
#four {
    top:150px;
    background:orange;
}
.square {
    text-align:center;
    line-height:50px;
    color:white;
    font-weight:bold;
    width:50px;
    height:50px;
    position:absolute;
}
.clear {
    clear:both;
}
#switch{
    position:relative;
    left:150px;
}

Jquery

$(function () {
    $('#switch').click(function () {
        var t = ($('.square').length-1) * $('.square:first').height();
        $('.square:first').animate({
            top: t
        }, function () {
            $('.square:gt(0)').each(function (i, v) {
                var $el = $('.square:eq(' + (i + 1) + ')');
                $el.animate({
                    top: i * $el.height()
                })
            });
            o = $(this).clone();
            $(this).remove();
            o.insertAfter($('.square:last'));
        });
    });
});

$(function () {
    $('#switch').click(function () {
        var t = ($('.square').length-1) * $('.square:first').height();
        $('.square:first').animate({
            top: t
        }, function () {
            $('.square:gt(0)').each(function (i, v) {
                var $el = $('.square:eq(' + (i + 1) + ')');
                $el.animate({
                    top: i * $el.height()
                })
            });
            o = $(this).clone();
            $(this).remove();
            o.insertAfter($('.square:last'));
        });
    });
});

#one {
    top:0;
    background:blue;
}
#two {  
    top:50px;
    background:red;
}
#three {
    top:100px;
    background:purple;
}
#four {
    top:150px;
    background:orange;
}
.square {
    text-align:center;
    line-height:50px;
    color:white;
    font-weight:bold;
    width:50px;
    height:50px;
    position:absolute;
}
.clear {
    clear:both;
}
#switch{
    position:relative;
    left:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
    <div id="one" class="square">1</div>
    <div id="two" class="square">2</div>
    <div id="three" class="square">3</div>
    <div id="four" class="square">4</div>
</div>
<div class="clear"></div>
<br />
<button id="switch">switch positions</button>

你也可以试试Swap Plugin .