плагин jQuery Easing - "s 'уже определено"; «прыжок» происходит на многострочном тексте - PullRequest
1 голос
/ 09 ноября 2010

Я пытаюсь использовать плагин Easing, чтобы избавиться от ужасных прыжков и заиканий в моих slideDown() эффектах:

    $('.message').each(function (index) {
        var t = $(this);
        t.hide();
        t.slideDown(3000, 'easeOutQuad');
    });

Эффект все еще такой же прерывистый, и я заметил 6 случаев следующего сообщения в VS 2010:

's' is already defined

из файла jquery.easing.1.3.js.

Я не могу себе представить, что то, о чем говорится в сообщении, могло бы замять вещи, но я не могу понять, в чем еще проблема.

Кто-нибудь успешно использует плагин Easing с jQuery-1.4.3? Есть ли что-то еще, что я пропускаю, или обходной путь, о котором я не знаю?

Обновление

Я продублировал "прыжок" здесь

Кажется, проблема возникает, как только вводится несколько строк на деление.

1 Ответ

1 голос
/ 09 ноября 2010

Если вы посмотрите на источник, предупреждения приходят от нескольких методов замедления, где s переопределяется. Например, посмотрите на easeOutElastic:

easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},

Обратите внимание, что s определяется во 2-й строке и переопределяется в 4-й и 5-й строках. Я не могу определить причину переопределения s, и удаление лишних ключевых слов "var" в 4-й и 5-й строках, насколько я могу судить, не влияет на метод замедления. Предупреждения выглядят безвредными.

Я создал jsFiddle и не вижу большой степени изменчивости в FF4b6, IE8 или Chrome9.

http://jsfiddle.net/TbwPT/

Может быть, не так гладко, как хотелось бы, но мое визуальное впечатление таково, что это связано с ограничениями, которые WRT создает или не отображает полные пиксели. По мере замедления замедления вы увидите целые ряды пикселей. Это ограничение того, как браузеры размещают текст в отличие от функции замедления. например Вы не можете расположить сверху = 3,5 пикселя влево = 2,9 пикселя. Я подозреваю, что если вы хотите более плавную анимацию, вам придется взглянуть на анимацию текста на .

ОБНОВЛЕНИЕ: Взглянув на ваш jsFiddle (http://jsfiddle.net/hPred/) с несколькими строками на деление, похоже, что анимация испытывает проблемы с определением правильной конечной высоты деления, когда она не указана. Она правильно анимируется от нуля до высота отдельной строки, а затем выскакивает до полной высоты div. Если вы укажете высоту, она будет правильно анимироваться от нуля до конечной высоты div. Следующий трюк работает для установки высоты div:

$('.message').each(function (index) {
    var t = $(this);
    t.height(t.height());  // Read the computed height and then set it explicitly
    t.hide();
    t.slideDown(3000, 'easeOutQuad');
});

Теперь это правильно оживляет меня ... http://jsfiddle.net/hPred/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...