Add Remove classes using jquery not working

[vizz]

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");

});

[vizz]

something like this example

maybe http://blog.alexmaccaw.com/css-transitions

[jeffcogswell]

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

[vizz]

@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?

[vizz]

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

[jeffcogswell]

This might help, at least with some of it. This is an article I wrote about page transitions. The main topic is local storage, but I also get into the animations. Perhaps if there's enough interest, I'll write more on this here on Daniweb.

http://html5center.sourceforge.net/blogs/Local-Storage-with-HTML5-Heres-How

[vizz]

Thanks