Question

I have an HTML file that has a set of divs with the class “block”.

I’d like for these to sort of slide into place when the page loads, and I’m trying to use jQuery’s animate function for this. However, I’m a total noob to jQuery, and I’m getting a bug that the tutorials at the jQuery site aren’t helping with.

Here’s my code:

$(document).ready(function() {
    $(".block").animate( {margin-top: "1%"}, {duration: 200, queue: true} );
});

The .block style looks like this:

div.block {
    width: 18%;
    float: left;
    margin: 1%;
    margin-top: -10%;
    min-height: 120px;
}

The error message I’m getting in Firebug is: “missing : after property id”.

So, how am I misunderstanding this, and would be the right way to get a set of blocks to “slide-in” to place? (I’d ideally like them to slide in one at a time in rapid succession.)

Here’s a link to the page I’m working on in case you need to see it. This is with the JS turned off so you see where the blocks should appear to be after animating.

Answer 1

margin-top isn’t a valid identifier by itself in JavaScript, so it needs to be in quotes, like this:

$(document).ready(function() {
    $(".block").animate( {'margin-top': "1%"}, {duration: 200, queue: true} );
});

Or jQuery lets you use caps to denote a -, like this:

$(document).ready(function() {
    $(".block").animate( {marginTop: "1%"}, {duration: 200, queue: true} );
});

Internally, jQuery just converts "margin-top" back to "marginTop". As an overall suggestion, since the default is to queue, you can simplify your code down to this:

$(function() {
    $(".block").animate({'margin-top': "1%"}, 200);
});