Search code examples
htmlpositiontogglecoordinate

How do I move a div to a specific coordinate regardless of its current position?


Forgive me if I am too vague or if my material is wrong , I've only been playing with JQUERY for like 3 days now and am a novice with coding.

I am working on a HTML page that has has exactly five immobile divs and one mobile div. What I plan to do is, every time one of the immobile divs are clicked, the one mobile div slides towards it and sits directly above it. When another immobile div is clicked the mobile div slides from its current location to the location of the immobile div. How can I tell the div to move to a particular coordinate on the screen regardless of its current location on the screen?

Below please see the code that I have just for a simple toggle:

$(document).ready(function(){
    $("#div2").click(function(){
        $("#div1").animate({left:'250px'});
    });
});

Any help would be greatly appreciated.

p.s. the effect that I am trying to create can be seen here:

http://www.charitywater.org/


Solution

  • You can use the below mentioned function which takes three parameters.

    divElement: div that you want to move
    direction : left or top 
    position:  position where you want div to get moved
    
    function MoveDiv(divElement,direction,position){
        $(divElement).css("psoition", "absolute");
        $(divElement).animate({direction:position});
    }