如何將一個DIV到另一個屏幕對面動畫

我有這樣的HTML結構：如何將一個DIV到另一個屏幕對面動畫

<div id="block-1"></div> 

    <div id="parent-block"> 
     <div id="block-2"></div> 
     <button>Move block</button> 
    </div>

的＃塊1浮到右上方的屏幕一角。

＃父塊是浮動左下角的屏幕角落。

我知道我可以使用事件對象獲取塊的座標，但是如何將#block-2移動到＃block-1中，而不依賴於屏幕大小，從而實現平滑動畫？

我想單擊按鈕後移動它。

來源

2015-07-03 Alex Sokol

Maybe this可以幫助：

var velocity = 1500; 

$("button").on("click", function(){ 
    var pos = $("#parent-block").offset(); 
    $("body").prepend($("#block-2").detach()); 
    var move = $("#block-2").css({ 
     "position": "absolute", 
     "z-index": "9999", 
     "top": pos.top, 
     "left": pos.left 
    }); 
    var block1 = $("#block-1").offset(); 
    move.animate({ 
     "top": block1.top, 
     "left": block1.left 
    }, velocity, function(){ 
     move.css({"top":"","left":""}); 
     $("#block-1").prepend(move.detach()); 
    }); 
});

和它的作品不止一次。

來源

2015-07-03 19:47:48

我upvoted因爲@washin ..使用.detach（）在這種情況下非常重要。只有動畫不好 –

也許像這樣？

位置＃塊2完全使用CSS：

position:absolute;

，然後添加到您的JavaScript

$(document).ready(function() { 
    $('YOUR_BUTTON_ID').click(function() { 
     $('#block-2').animate({ 
     'top' : "0px", 
     'right' : "0px" 
     }); 
    }); 

});

不要忘記您的按鈕ID添加到上面的代碼。

來源

2015-07-03 19:10:05 codedude

他可能會去右上角。 – Vinay

@Vinay哎呀你說得對。我會解決它。 – codedude

這將讓塊2塊1到

$("button").click(function(){ 
    var block1 = document.getElementById('block-1'); 
    var $block2 = $("#block-2"); 

    $block2.animate({ 
     bottom: block1.parentNode.scrollHeight - block1.offsetTop - block1.offsetHeight, 
     left: block1.offsetLeft, 
    }, 500); 
});

的jsfiddle：http://jsfiddle.net/johndm/894L3esq/1/

來源

2015-07-03 19:29:52

如何將一個DIV到另一個屏幕對面動畫

回答

相關問題