CODEWITHSUNDEEP
jqueryhtmlcss
andy
andy

Reputation: 2754

Move one div on click of another?

I'd like to use jquery to move one div (that'll be absolutely positioned off screen) to a specific part of it's parent element when an a tag is clicked.

<div id="casestudy4" class="newboxes2">
                                <div class="paperclip"></div>
                                <p>text here</p>

                            </div> <!-- end div casestudy4 -->

Basically .paperclip is absolutely positioned left:25%; top:-2000px; and I'd like it to move down when the link is clicked.

Upvotes: 0

Views: 1686

Answers (3)

Mohayemin
Mohayemin

Reputation: 3870

    <script type="text/javascript">
        $(function () {

            $("#move").click(function () {
                $(".paperclip").animate({
                    top: "+=500px"
                }, 5000);
                return false;
            });
        });
    </script>

    <a href="#" id="move">move</a>

Hope it helps.

Upvotes: 2

Igbanam
Igbanam

Reputation: 6082

Assuming the link is the paragraph, this is a solution.

$("#casestudy4 > p:first-child").click(function() {
  $("#casestudy4 > .paperclip").css("top", "500px");
}

Obviously, you will have to properly target the link and properly specify what "down" means instead of 500px.

Upvotes: 0

panda
panda

Reputation: 1344

you may use this to hide the div when you click the link

$(selector).click(function(){
   $('.paperclip').hide();
})

Upvotes: 0

Related Questions