Jquery：尝试使用div的高度来计算增量动画事件的距离

Question

已解决（见下文）

$(function () {
var textHi = $('#text').height();
var moveIt = textHi / 5;
var margH = parseInt(("#text").css("marginTop"));
margH = Math.abs(margH); 

  $("#down").mousehold(function(){
    if (margH === textHi) {
  return false;
    } else {
  $("#text").animate({marginTop: '-='moveIt}, 500);     
    }
  });


  $("#up").mousehold(function(){
    if (margH === 0){
  return false;
    } else {
  $("#text").animate({marginTop: '+='moveIt}, 500);
    }
  });
});

我的 DIV 两侧都有两个按钮。当我使用常规数字向上或向下递增 div 并基于简单的递增变量停止/启动它时，它会起作用。

虽然，由于 DIV 的大小不同，内容量也不同，但我想获取当前的 div 高度 (textHi)，然后将其除以一个量，即 5 (moveIt)，然后使用此变量来移动事件上的 div 向上和向下。然后我想获取当前的 margin-top 值并将其用作 div 位置的指示器，即，当 margin top 为“0”时，向上按钮不起作用，因为这会将其向下推得太远。或者，一旦边距顶部变得相等（负数，但我将其转换为正数，因为没有实际的“正”边距顶部），它就会停止进一步下降，因为这将使 div 永远滚动。

由于某种原因，变量正在起作用，但增量没有发生。

任何想法都会很棒，谢谢。

按照答案的方向，这样解决：

$(function () {
  var textHi = $('#text').height();
  var moveIt = textHi / 8;
  var timing = moveIt * 5;
  var intVal = 0;
    $("#down").mousehold(function(){
      if (intVal === 7) {
        return false;
      } else {
        $("#text").animate({marginTop: '-=' + moveIt}, timing);
        intVal = intVal + 1;
      }
    });


    $("#up").mousehold(function(){
      if (intVal == 0){
    return false;
      } else {
        $("#text").animate({marginTop: '+=' + moveIt}, timing);
        intVal = intVal - 1;
      }
    });
});

如您所见，我使用了递增变量来启动动画。当 div 向下滚动时，它到达其总高度的 7/8 并停止。如果增量为 0，则不会向上滚动。

Answer 1

parseInt(("#text").css("marginTop")); 缺少 $。它应该是 parseInt($("#text").css("marginTop"));。

$("#text").animate({marginTop: '-='moveIt}, 500); 也不正确，您缺少 + 符号来炮制您的细绳。它应该是： $("#text").animate({marginTop: '-=' + moveIt}, 500);

如果这不能解决您的问题，那么我建议设置一个 <您的代码的 href="http://jsfiddle.net" rel="nofollow">JSFiddle 。