jquery - jqueryでCSSプロパティをチェックする際の問題

Question

ボタンをクリックして div を移動し、上部マージンが特定の値になるとアラートがポップアップするようにしようとしています。ただし、アラートは、必要なマージンから離した後にのみポップアップします。

私が使用しているコードは次のとおりです。

$("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');
    }
}

margin-top を最初に 100px に移動するとアラートは表示されませんが、そこから移動するとアラートが表示されます。最初に実行され、次に div がアニメーション化された場合のチェック機能のようなものです。最初にアニメーション化する方法はありますか？

Answer 1

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

Answer 2

これを試して：

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

これによりcheck、アニメーションが完了すると関数が実行されます。

Answer 3

私見、私はやります：

    $("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');
  };}