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

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

3 个答案: