Question

I’m trying to move a div by clicking a button and have an alert pop up when the top margin is a certain value. However, the alert only pops up after I am moving it away from the margin I want.

Here is the code that I am using:

$("input.down").click(function()
    $(".block").animate({"margin-top": "+=50px"});
    check();
});

$("input.up").click(function(){
    $(".block").animate({"margin-top": "-=50px"});
    check();
});

function check(){
    var top = $(".block").css("margin-top");

    if (top == "100px") {
        alert('top: ' + top + '\nyou have the right height');
    }
}

When I initially move the margin-top to 100px there is no alert, but once I move it away from there, there is an alert. Its like the check function if run first and then the div is animated. Is there a way to make it so it is animated first?

Answer 1

$("input.down").click(function() {
   $(".block").animate({"margin-top": "+=50px"}, function() { check(); });
});