What's wrong with this (animate) jquery code?

Question

var object = $('#object');
var start = $('#start');
var normal = $('#object_normal');
normal.hide();

start.on('click', function(){
    object.animate({margin-bottom:'0px'}, 3000, function(){
                normal.fadeIn(700) ;  
                   });
});

can anyone explain why this code does not work? The variables and method outside the function do work. But when I add the function below, suddenly nothing happens. So there must be something wrong with the function.

Answer 1

This line is the problem:

object.animate({margin-bottom:'0px'}, 3000, function(){

(the property to be animated is interpreted as margin minus bottom.)

Instead, use this:

object.animate({marginBottom:'0px'}, 3000, function(){

You should get into the habit of watching the console log when testing your code; the error message you would have received would have shown you exactly where the problem was.