0

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

});
3
Contributors
7
Replies
38
Views
3 Years
Discussion Span
Last Post by vizz
0

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

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.