I'm using Page Transitions (get animations.css from tympanus.net) to hide/show div. How to add remove classes.

I'm trying to add in-out effects with simple classes.

How to Remove class current from current div & add outgoing class to same div and add class current & incoming class to next div?
(It's simply hide current div & show next div)

<ul class="navigation">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#portfolio"> Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>


<div id="home" class="panel current">   </div>
<div id="about" class="panel">          </div>
<div id="services" class="panel">       </div>
<div id="portfolio" class="panel">      </div>
<div id="contact" class="panel">        </div>

Script

$(".navigation li a").click(function() {

    var currentId = $(this).attr("href");

    //var nextPage= ??? ;//how to use this

    alert(currentId);

    $(".current").addClass("pt-page-moveToLeftFade").removeClass("current");
    $(currentId).addClass("pt-page-moveFromTop").addClass("current");

});

something like this example

Your code almost worked for me, except I had to change line 9 to remove the moveFromTop animation. After that fix, it completely worked:

$(".navigation li a").click(function() {
    var currentId = $(this).attr("href");
    $('.current').removeClass('pt-page-moveFromTop').addClass('pt-page-moveToLeftFade').removeClass('current');
    $(currentId).addClass('pt-page-moveFromTop').addClass('current');
});

@jeffcogswell

Hey thanks! your code is working, but I'm trying to get effects like this example. With your code only incoming animations are working.

I want to add in-out animations, in the given link they have complicated script. I just want to add and remove animations.

can you help with this?

How to add OUT animation to previous page? How to add IN animation to next page?

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.