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