CODEWITHSUNDEEP
jqueryhtmllistmenutransition
JosephFTaylor
JosephFTaylor

Reputation: 99

Page transition with <li> not working

I'm using this code: http://askmike.org/2011/12/smooth-page-transitions-using-jquery-video/ for my page.

Below is my modified code for the Javascript:

$(function() {
    var request = window.location.hash;
    if(request == '#page-2') {
        $('.page.current').removeClass('current');
        $('.page').eq(1).addClass('current');
    }
        if(request == '#page-3') {
        $('.page.current').removeClass('current');
        $('.page').eq(2).addClass('current');
    }
        if(request == '#page-4') {
        $('.page.current').removeClass('current');
        $('.page').eq(3).addClass('current');
    }
    $('nav a').click(function(){
        var speed = 200;
        var i = $(this).index();
        $('.page.current').animate({opacity: 0, marginTop:0},speed,function(){
            $(this).removeClass('current');
            $('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 0},speed).addClass('current');
        });
    });
});

Whenever I put the links in an unordered list, it stops knowing which div to show. I'm no expert with Javascript as I'm just borrowing code, but I'm guessing by putting it in the list prevents the code from knowing which one in order it it (if that makes sense). Any help would be much appreciated. Here is a jsFiddle: http://jsfiddle.net/YUH6s/1/ Thank you.

Upvotes: 2

Views: 180

Answers (1)

Ram
Ram

Reputation: 144689

In your markup index of anchor links is always 0 and your eq method only selects the first .page element. You can find the index of parent li element instead.

Change: 

$(this).index()

To:

$(this).parent().index()

http://jsfiddle.net/Xht3v/

Upvotes: 1

Related Questions