Jquery: попытка использовать высоту div для вычисления расстояния приращения события animate - PullRequest
Новая
       25

Jquery: попытка использовать высоту div для вычисления расстояния приращения события animate

0 голосов
/ 08 февраля 2012

Решено (см. Ниже) 

$(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, т.е. когда вершина поля равна '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, оно не будет прокручиваться вверх.

1 Ответ

1 голос
/ 08 февраля 2012

parseInt(("#text").css("marginTop")); отсутствует $.Это должно быть parseInt($("#text").css("marginTop"));.

$("#text").animate({marginTop: '-='moveIt}, 500); также неверно, вам не хватает символа +, чтобы придумать вашу строку.Это должно быть: $("#text").animate({marginTop: '-=' + moveIt}, 500);

Если это не решит вашу проблему, тогда я предлагаю настроить JSFiddle вашего кода.

...