使用 jquery 检查 CSS 属性时遇到问题答案

【问题标题】：trouble checking CSS property with jquery使用 jquery 检查 CSS 属性时遇到问题
【发布时间】：2013-03-26 03:20:13
【问题描述】：

我正在尝试通过单击按钮来移动 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 动画，它就像检查功能。有没有办法让它首先动画化？

【问题讨论】：

标签： jquery css

【解决方案1】：

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

【讨论】：

非常感谢，这有效。我很想知道为什么将 check() 放在函数中会让动画首先发生
在我的代码中，check() 在动画完成时执行；但在您的代码中，check() 在动画开始后执行。在这种情况下，由于动画没有完成，check() 会发现<div> 不在100px，所以不会提示信息。但是当您再次单击它时，动画开始，check() 运行，这一次，消息被警告，因为<div> 在最后一个动画中位于100px。

【解决方案2】：

试试这个：

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

这应该在动画完成后运行check 函数。

【讨论】：

【解决方案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');
  };}

【讨论】：