開關的div動畫

-3

我有兩個主要的div top-div和bottom-div和我有這樣兩個div即one-div在top-div和bottom-divtwo-div內部1-1格。開關的div動畫

我有一個切換按鈕使用我正在one-div到bottom-div和two-div在top-div。它工作正常。但我想顯示動畫，如one-div向上移動，two-div向下移動，反之亦然。

這是我的代碼。

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

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

請給我任何提示或引用。

來源

2016-10-17 Sandip Armal Patil

什麼是你的（「* [MCVE] *」）HTML？你有超過2.5k代表（因爲我寫），所以這個提示真的不應該是必要的在這一點上。另外，上面的代碼是不是工作，它不應該做什麼，它應該做什麼，它不應該做什麼？瀏覽器的開發者工具中是否有錯誤報告？ –

更新..第一次創建代碼片段，所以不知道這一點。 –

[appendTo（）animation]（http://stackoverflow.com/questions/9893134/appendto-animation）可能的副本 – Dekel

前幾天我做某件事情時，偶然發現了這個帖子：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函數添加一個回調函數，這樣你就可以在交換過程中禁用交換中涉及的任何按鈕。這樣你就不會通過按下按鈕來打破它。

來源

2016-10-17 12:10:24 fhbr

這是一個代碼[here]（http：// stackoverflow。 com/questions/9893134/appendto-animation），爲什麼不把這個問題標記爲重複？ – Dekel

開關的div動畫

回答

相關問題