Question

我有这种html结构：

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

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

＃block-1浮动到右上角的屏幕角落。

＃parent-block浮动左下角屏幕。

我知道我可以使用事件对象获取块的坐标，但是如何将＃block-2移动到＃block-1并且平滑动画而不依赖于屏幕尺寸？

我想在点击按钮后移动它。

Answer 1

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());
    });
});

它不止一次。

Answer 2

也许是这样的？

绝对使用CSS定位＃block-2：

position:absolute;

然后将其添加到您的javascript

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

});

不要忘记将按钮ID添加到上面的代码中。

Answer 3

这将使block2变为block1

$("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/

如何使用动画在屏幕上将一个div移动到另一个div

3 个答案: