在jQuery中使用按钮移动项目，只要它未到达特定位置

我有一个功能，允许用户通过单击按钮移动元素。但是，我只希望该按钮在元素不位于100px的情况下工作。只要元素的初始位置是100px，这似乎就可以正常工作，在这种情况下，按钮实际上没有效果。但是，如果项目在移动后到达100px位置，则该功能似乎不再工作，即使项目位于100px，单击按钮仍会移动项目。我应该用不同的编码吗

$( "#button" ).click(function() 
    {
        if ( $( ".item" ).css('top') != "100px" ) 
           {
              $( ".item" ).animate({ top: "+=20px" });
           }
});

当达到限制时，应使用步骤选项停止动画：

$("#button").click(function () {
    $(".item").animate({
        top: "+=20px"
    }, {
        step: function (top) {
            if (top >= 100) {
                $(".item").stop();
            }
        }
    });
});

编辑： 或者如果您确实想使用top的值：

---

EDIT2：更新了Fiddle演示，使其更具可演示性，并对代码做了一些修改

这对我很有用。它在100px停止：这对我来说很有效，如果你继续快速点击按钮，div将出界。if语句不会等待animate函数完成。我想这就是OP面临的问题。如果你对代码有任何疑问，请告诉我。我会尽快给你回复。

$("#button").click(function () {
    $(".item").animate({
        top: "+=20px"
    }, {
        step: function (top) {                
            if ($(".item").css("top") == "100px") {
                $(".item").stop();
            }
        }
    });
});