Question

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

我有一个切换按钮，我正在移动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函数添加一个回调，这样你就可以在发生交换时禁用交换中涉及的任何按钮。这样你就可以通过快速按下按钮来打破它。

使用动画在Div之间切换Div

1 个答案: