trouble checking CSS property with jquery

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?

C. Leung · Accepted Answer · 2012-04-24 05:41:22Z

1

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

answered Apr 24, 2012 at 5:41

C. Leung

6,3283 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1290426 Over a year ago

Thanks a lot, this worked. I'm curious to know why putting check() inside of a function would allow the animation to happen first

C. Leung Over a year ago

in my code, check() is performed when the animation completes; but in your code, check() is performed just after the animation starts. in that case, as the animation is not completed, check() will find that the <div> is not at 100px, so it won't alert message. but when you click it again, animation starts, check() runs, this time, message is alerted because the <div> is at 100px in the last animation.

Femi · Accepted Answer · 2012-04-24 05:37:06Z

0

Try this:

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

This should run the check function once the animation is complete.

answered Apr 24, 2012 at 5:37

Femi

64.8k8 gold badges120 silver badges150 bronze badges

Comments

ducdhm · Accepted Answer · 2012-04-24 05:38:19Z

0

IMHO, I'll do:

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

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

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

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

answered Apr 24, 2012 at 5:38

ducdhm

1,95215 silver badges26 bronze badges

Collectives™ on Stack Overflow

trouble checking CSS property with jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related