如何在jquery动画中设置最大margin-top?

时间:2012-11-15 22:36:11

标签: javascript jquery

我在jQuery中有以下代码,它动画为div marginTop。

如何设置它以便一旦边距顶部等于900px,禁用点击事件?

$("#tmbUp").click(function(){ 
$("#tmbHolder").animate({"marginTop": "-=100px"}, "slow");
});

$("#tmbDown").click(function(){
$("#tmbHolder").animate({"marginTop": "+=100px"}, "slow");
});

3 个答案:

答案 0 :(得分:2)

在致电animate功能之前,只需检查上边距的当前值即可。如果它是900(或更低),请不要制作动画。

答案 1 :(得分:1)

animate方法可以选择使用回调函数。

你想要做的是这样的事情:

$("#tmbDown").click (function (){ 
  $("#tmbHolder").animate (
    {"marginTop": "+=100px"}, 
    "slow",
    "swing",
    // The callback function
    function () {
      if ($(this).css ('marginTop') >= "900px") {
        $("#tmbDown").unbind ('click');
      }
    }
  );
});

答案 2 :(得分:1)

我假设您只想在marginTop为> = 900时禁用click事件,并在/用户减少marginTop时再次启用它。我建议利用animate函数中内置的回调函数。

$("#tmbUp").click(function(){ 
    $("#tmbHolder").animate({"marginTop": "-=100px"}, "slow", 
        function() {
            // if tmbHolder's marginTop < 900px, enable #tmbDown
        }
    );
});

$("#tmbDown").click(function(){
    $("#tmbHolder").animate({"marginTop": "+=100px"}, "slow", 
        function() {
            // if tmbHolder's marginTop >= 900px, disable #tmbDown
        }
    );
});

希望能帮到你。