如何将一个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到另一个屏幕对面动画

回答

相关问题