Jquery functions working momentarily, and then not at all?

I had applied this slide mechanism to a page, and it worked fine for a while. I can't remember changing anything at all, but now it won't function properly.

Here is the code:

$(document).ready(function () {
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function () {
        var href = $(this).attr('href');
        if (hash == href.substr(0, href.length)) {
            var toLoad = hash + '.html #content';
            $('#content').load(toLoad)
        }
    });
    $('#nav li a').click(function () {
        $("#story_pane").animate({
            marginLeft: 360
        }, 250);
        $("#main_content").animate({
            marginLeft: -600,
            opacity: 0.3
        }, 250);
        $("#main_content").css();
    });
    alert("test");
    var toLoad = $(this).attr('href') + ' #content';
    $('#content').hide(1, loadContent);
    $('#load').remove();
    $('#story_pane').css("display", "block");
    $('#story_pane').append('<span id="load"></span>');
    $('#load').fadeIn(1);
    window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

    function loadContent() {
        $('#content').load(toLoad, '', showNewContent())
    }

    function showNewContent() {
        $('#content').show(1, hideLoader());
    }

    function hideLoader() {
        $('#load').hide();
    }
    r开发者_JAVA百科eturn false;
});

Only the "test" alert executes properly, I had been looking for any brackets i forgot to close, or other syntax issues but i'm in a bit of a dead end. I do have the files backedup, but that's a last resort option, in case I can't fix this.

edit- works now, I deleted $("#main_content").css(); and added a click function which fixed it

---

Change this:

    function loadContent() {
        $('#content').load(toLoad,'',showNewContent) // remove the "()" here
    }

The way you had that call to ".load()" coded, you were calling "showNewContent" at the time the load began, not when it finished. Same goes for the "showNewContent" function itself:

    function showNewContent() {
        $('#content').show(1,hideLoader); // again, remove "()" from "hideLoader"
    }

It's important to keep clear the distinction between referring to a function by name when passing it as a parameter for some API that needs a callback, and the process of actually calling the function. In these cases, you need a reference to a function. (Yes, a function call can return a reference to a function, but that's not what's happening here.)

edit — Another significant problem you're going to have here is that the initial call to ".load()" to fetch the currently-relevant page based on the state of the nav will almost certainly not complete before the rest of that code has run. If there are any dependencies for the initialization on content loaded by that initial call to "load()", then that won't be in the DOM yet. You could fix this by stuffing all the code in the rest of the "ready" handler into the completion handler for that initial ".load()".

edit again — OK another problem is this line of code, right after the "alert()":

var toLoad = $(this).attr('href') + ' #content';

What is it that you expect this to be at this point? I think that jQuery will set this to refer to the "document" object, but you won't be able to get any "href" attribute from it like that. Maybe you want "window.location.href" there? I'm not sure what you're trying to accomplish, exactly.

---

This is what live and delegate are for.