Question

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.

Answer 1

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/