jQuery, Calling multiple animations in a row on cl

Question

So far I have it so when the page opens some animations run to make some pictures and text slide down into view, I have links at the top of the page which have no destinations but I have made them all links for styling purposes e.g effects on Hover, Visited etc. The links have classes, all links have the "nav" class and then they each have there relative classes "about" , "contact" etc.

I could get it so that the content for the index page slid down when the page was opened, and slide back up (out of view) when a "nav" class was clicked. However, I want it so that when a "nav" class is clicked the page content slides out of view and depending on which link was clicked ("about" or "contact" links) the new content slides down into view.

        $  (".about") .click(function() {
                $ (".aboutimage") .animate ( {
                marginTop : '-300px'
                }, 300) ;   
        });

When I add this new bit of jQuery to the end of the "nav" (function) I cannot get the new page content ("about" or "contact") to slide down. I am thinking of some sort of if statement but not sure how i would go about this and i have tried and tried and given up :-(.

I am still at school and making a website for some coursework. The effect I'm going for is the fact it will only have one page. I am very new to jQuery so I am probably going the longest route round this but hey. Any Help would be greatly appreciated.

$ (document).ready(function() { 
    $ (".imgtop") .ready(function() {
        $ (".imgtop") .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".imgright") .ready(function() {
        $ (".imgright") .delay(200) .animate ( {
        marginLeft : '0px'
        }, 500) ;   
    });
    $ (".imgbot") .ready(function() {
        $ (".imgbot") .delay(400) .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".texttop") .ready(function() {
        $ (".texttop") .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop2") .ready(function() {
        $ (".texttop2") .delay(200) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop3") .ready(function() {
        $ (".texttop3") .delay(400) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });


    $  (".nav") .click(function() {
        $ (".imgtop") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".imgright") .animate ( {
        marginLeft : '-550px'
        }, 300) ;   

        $ (".imgbot") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".texttop") .delay(200) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop2") .delay(100) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop3") .animate ( {
        marginTop : '-170px'
        }, 300) ;   

    });

    $  (".about") .click(function() {
        $ (".aboutimage") .animate ( {
        marginTop : '-300px'
        }, 300) ;   
            });
});

Answer 1

Remove the $(".imgtop") .ready(function() {

.ready() handler is valid only when called on the document..

.ready(function() for each object and then try..

Your code should look like this

$(document).ready(function() {
    $(".imgtop").animate({
        marginTop: '0px'
    }, 500);
    $(".imgright").delay(200).animate({
        marginLeft: '0px'
    }, 500);
    $(".imgbot").ready(function() {
        $(".imgbot").delay(400).animate({
            marginTop: '0px'
        }, 500);
    });
    $(".texttop").animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop2").delay(200).animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop3").delay(400).animate({
        marginTop: '-20px'
    }, 500);

    // Your Click events here
});​