CODEWITHSUNDEEP
jqueryhtmlanimationjquery-animate
user3182261
user3182261

Reputation: 271

replace div with animation

I'm trying to replace a div when a link is clicked. When the first div is shown and a link to the second div is clicked, I want the first div to slide down and disappear and the second div to slide in from the bottom.

So far I have this:

HTML

       <li><a href="#" class="ripplelink" id="link_1">Home</a></li>
       <li><a href="#" class="ripplelink" id="link_2">Another link</a></li>



                <div class="jumbotron" id="home">
                    <h1>Hey there!</h1>
                    <p>...</p>
                </div>

                <div class="jumbotron" id="portfolio">
                    <h1>Hello again!</h1>
                    <p>...</p>
                </div>

JQUERY

$(document).ready(function(){

    $('#portfolio').hide();
    $('#home').animate({'margin-top': '-0.8em'}, 500);

    $('#link_2').click(function(){
        $('#home').hide();
        $('#portfolio').show();
        $('#portfolio').animate({'margin-top': '-0.8em'}, 500);
    });

    $('#link_1').click(function(){
        $('#portfolio').hide();
        $('#home').show();
        $('#home').animate({'margin-top': '-0.8em'}, 500);
    });


});

This only works the first time the links are clicked but I want it to work everytime the links are clicked. Can someone please tell me how to do this?

Upvotes: 0

Views: 1750

Answers (2)

Ashish jain
Ashish jain

Reputation: 11

$(document).ready(function(){

$('#portfolio').hide();


$('#link_2').click(function(){
    $('#home').slideUp("slow", function() { 
    });

    $('#portfolio').slideDown("slow", function() { 
    });

});

$('#link_1').click(function(){
     $('#portfolio').slideUp("slow", function() { 
    });

    $('#home').slideDown("slow", function() { 
    });
});

});

Upvotes: 0

Pavdro
Pavdro

Reputation: 427

Without looking at complete markup I'm guessing you need to return your divs to original position.

$('#link_2').click(function(){
    // --- THIS line is missing---
    $('#home').css({'margin-top': '0em'});
    // -------------------------------------
    $('#home').hide();
    $('#portfolio').show();
    $('#portfolio').animate({'margin-top': '-0.8em'}, 500);
});

$('#link_1').click(function(){
    // --- THIS line is missing---
    $('#portfolio').css({'margin-top': '0em'});
    // -------------------------------------
    $('#portfolio').hide();
    $('#home').show();
    $('#home').animate({'margin-top': '-0.8em'}, 500);
});

Upvotes: 2

Related Questions