使用动画在 div 之间切换 div

Question

我有两个主要的 div top-div 和 bottom-div，我在这两个 div 中有 1-1 个 div，即 top-div 中的 one-div 和 bottom-div 中的 two-div。

我有一个切换按钮，用于将one-div 移动到bottom-div 和two-div 中的top-div。它工作正常。但我想展示像one-div 向上移动和two-div 向下移动这样的动画，反之亦然。

这是我的代码。

function swapButtonClicked(clicked_id){
			if(clicked_id == "btn-bottom"){
				document.getElementById('top-div').appendChild(document.getElementById('one-div'));
				document.getElementById('bottom-div').appendChild(document.getElementById('two-div'));
			}else if(clicked_id == "btn-top"){				
				document.getElementById('bottom-div').appendChild(document.getElementById('one-div'));
				document.getElementById('top-div').appendChild(document.getElementById('two-div'));
			}				
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="top-div">
    <div id="one-div">Move1</div>
</div>
<div id="bottom-div">
    <div id="two-div">Move2</div>
</div>

<button id="btn-top" click="swapButtonClicked(this.id)">To Top</button>
 <button id="btn-bottom" click="swapButtonClicked(this.id)">To Bottom</button>

请给我任何提示或参考。

Answer 1

几天前我在做某事时偶然发现了这篇文章：appendTo() animation

将该函数更改为 prependTo 版本我创建了一个小小提琴，这可能是您正在寻找的： https://jsfiddle.net/js30psh0/2/

$.fn.animatePrependTo = function(sel, speed) {
    var $this = this,
        newEle = $this.clone(true).prependTo(sel),
        newPos = newEle.position();
    newEle.hide();
    $this.css('position', 'absolute').animate(newPos, speed, function() {
        newEle.show();
        $this.remove();
    });
    return newEle;
};

$('#swap').on("click", function() {
    var tmp = $('#inner1').parent();
    $('#inner1').animatePrependTo($("#inner2").parent(),2000);
    $('#inner2').animatePrependTo(tmp,2000);
});

您还可以为 animatePrependTo 函数添加一个回调，以便在交换发生时禁用任何涉及交换的按钮。这样你就不会因为按得太快而破坏它。