jQuery animate opacity, fade, & slide up page load effect This is the first time I've actually made my own jQuery script from scratch, because I couldn't find exactly what I was looking for.  My code works how I want it to, although I don't know if I did it correctly.  Just something about it is screaming to me, and although it works, I didn't do it properly.  So I figured I would share what I have and see what you had to offer as a better way to accomplish this.

$(window).load(function() {
    $('.overlay').animate({
        opacity: 1,
        height: '0'
    }, 1000, function(){$(this).remove()});

    $("#frame").delay(300).animate({
        opacity: 1
    }, 300)
});


I have ran it though a JavaScript compressor which removed the ;s, and then through a "beautifier" for readability, but it still seems to work.  I'm not even too sure how important those are in JavaScript.  I'm a CSS guy and I know in CSS the last ; is not required, so figured I'd leave them out since it's working.

I set up an example of this in action here.

If anyone has any suggestions on my code as this being my first real attempt at jQuery, I would love some feedback.
Interesting concept, and I do see some improvements that could be made.

First off though, it's true that the semicolons aren't necessary in JavaScript. It's a matter of preference really. If you think the people who will read your code would prefer semicolons, then use them where necessary. I suggets you try JSLint in the future!


I think that your animation is somewhat strange, but I'm not here to argue that! (The change in height of .overlay is what I'm talking about) I think that combination of animations is fine, and could be left as is.
Perhaps the one thing you could do: add some space to improve readability. Packing that last closure onto one line is just restrict breathing room, and it would be easier to quickly read it if it was spread out.
Your second animation could simply be:

$('#frame').delay(300).fadeIn(300)


You weren't the first one who thought about fading ;)


So my ideal function would be as follows:

$(window).load(function () {
    $('.overlay').animate({
        opacity: 1,
        height: 0
    }, 1000, function () {
        $(this).remove()
    });

    $("#frame").delay(300).fadeIn(300)
});