CODEWITHSUNDEEP
javascriptjquery
Alex Sokol
Alex Sokol

Reputation: 124

How to move one div into another across screen with animation

I have this kind of html structure:

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

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

The #block-1 is floating to the right-top screen corner.

The #parent-block is floating left-bottom screen corner.

I know I can get coordinates of the block using event object, but how can I move #block-2 into #block-1 with smooth animation without depending on screen size?

I want to move it after clicking button.

Upvotes: 1

Views: 1770

Answers (3)

user4227915
user4227915

Reputation:

Maybe this could help:

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

And it works more than once.

Upvotes: 3

jmoo
jmoo

Reputation: 71

This will get block2 to 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/

Upvotes: 0

codedude
codedude

Reputation: 6519

Perhaps something like this?

Position #block-2 absolutely using CSS:

position:absolute;

and then add this to your javascript

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

});

Don't forget to add your button id to the code above.

Upvotes: 0

Related Questions