更改themeforest主题的js功能

Question

I purchased a theme off of http://themeforest.net and now the them was taken off.

The original theme functionality was to have all of the links pages inside of their own divs in the index page however I changed the functionality so that each link is on its own controller since I am using Codeigniter.

What I want to happen is when a new link is clicked it still rolls up the content div and goes to the clicked link and then rolls down the content of that page. As of right now it rolls up ALL the way up the page and doesn't even load the new page. The commented section of code is what the original code was from the template.

/*****************************************************
MENU TRANSITION EFFECTS
******************************************************/
$("#menu1 ul li a").click(function(e){

e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart');

/*
var id = $(this).attr("href");  
if(id == aid) return false; 
$('#menu1 ul li a').removeClass('a');
            $(this).addClass('a');
if($("#container > div:visible").size() > 0) {      
    $("#container > div:visible").animate({top:'-500px'},500,'easeInQuart',function(){ $("#container > div:visible").css({display:'none',top:'-500px'}); $('#container > div#' + id).css({display:'block'}).delay(400).animate({top:'500px'},800,'easeOutQuart');               
                $(function() {              
            $('.scroll').jScrollPane();
        });

     });
} else  {
    $('#container > div#' + id).css({display:'block'}).animate({top:'500px'},200,'easeOutQuart');
}
aid = id;
return false;
*/
});  

Edit: I tried it on my regular site and for some reason it wasn't working the same. Here's the template. I uploaded it to one of my other sites for display. Keep in mind the difference is that each link is a new controller and each div is a new view. Does that explain any further the differences between the original template and what I"m trying to accomplish.

http://www.justmyfiles.me/

Does anybody have any ideas?

Answer 1

The "transition" javascript code could look like :

$("#menu1 ul li a").click(function(e){

    var a = this;
    e.preventDefault();

    $('#container').animate({top:'-500px'},500,'easeInQuart',function() {
        location.href = a.href;
    });
});

And the document ready code :

$(document).ready(function() {
    $('#container').animate({top:'0px'},500,'easeInQuart');
});

/*CSS*/ 
#container { top: -500px; }