Question

我想将第一个div滑动到最后一个div与动画同步。你能帮我解决一下jquery吗。

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


    });
});

jsfiddle

Answer 1

您的第一个项目不在页面顶部，您在计算位置时忽略它。有一点差距 - body margin等于8px。

即，当你计算第3块的位置时，你会这样做：

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

$("#three").offset().top等于108，因为其中8个是保证金，其中100个是实际位置。它将块移动到top = 108，并且有余量，它变为116 - 比您需要的低8个像素。第2和第3块分别比你需要的移动8个像素。

您需要减去第一个块的位置以获得相对位置。这是代码：

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

检查this JSFiddle demo。

<强>更新
无论如何，在我看来，这种方法是不正确的。您有具有相对位置的HTML块。直接操纵他们的位置是一种糟糕的方法。此外，它很难计算，如果你有超过4个项目或者你有复杂的CSS规则，你很容易混淆。

最好的方法是在DOM中交换他们的位置。它是DOM友好的，CSS友好的，跨浏览器。它易于阅读和维护。让浏览器为您完成所有工作！有了它，您还可以在不更改代码的情况下添加任意数量的项目。

检查这个JS函数：

$(function() {    
    $('#switch').click(function() {  
        var firstItem = $(".square:first"); // Take the first item
        firstItem.fadeOut('slow', function() { // Hide it. Then...
            firstItem.parent().append(firstItem); // Add it to the end
            firstItem.fadeIn(); // Show it
        });
    });
});

Full example with fading at JSFIddle

您还可以使用slideUp，slideDown功能，以使其看起来更好。

Full example with sliding at JSFIddle

没有动画，它会更短：

$(function() {    
    $('#switch').click(function() {  
        var firstItem = $(".square:first"); // Take the first item
        firstItem.parent().append(firstItem); // Add it to the end. Profit!
    });
});

Answer 2

由于信息很少，我已经创建了一个演示四，你可以试试，

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您也可以尝试Swap Plugin。

Answer 3

我不确定您究竟在寻找什么，但我认为以下是您要做的事情：

<强> 段：

$(function() {
    var squares = $('.square');
    var numSquares = squares.length;
    var currPositions = [];
    squares.each(function(index){
        currPositions[index] = $(this).offset().top;
        $(this).data('iterator', index);
    });
    $('#switch').click(function() {
        squares.each(function(index){
            $(this).data('iterator', parseInt($(this).data('iterator')) - 1);
            if (parseInt($(this).data('iterator')) < 0) $(this).data('iterator', numSquares - 1);
            $(this).animate({ top: currPositions[$(this).data('iterator')] });
        });
    });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<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 class="clear"></div>
<br />
<button id="switch">switch positions</button>

希望这有帮助。

<强> 详细说明：

为了使此解决方案有效，我在CSS中使用了position: absolute;所有.square元素，即#one，#two，#three和{{ 1}} elements。
我还在每个元素上应用#four增量top。值50px来自考虑50px个框。
在JavaScript中，首先会计算默认位置，并将其放在height数组中，分别位于currPositions值。
然后有一个jQuery的index辅助方法，用于在每个$(this).data(...) jQuery对象中放置iterator。
然后使用此.square逐个递减每个元素并继续迭代先前创建的iterator数组，以获取任何当前currPositions元素的目标值动画到。

希望你觉得它很有用。

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

3 个答案: