Может кто-нибудь дать мне автономный код функций анимации jQuery

Question

недавно я задал этот вопрос: Хотелось бы понять функцию Animate (вычисление и пошаговое выполнение) , и я получил ответ.

Я попытался удалить ненужный код jQuery и оставилТолько функции анимации jQuery.

Если кто-то может предоставить мне только функции анимации jQuery, которые имеют их технику - я буду очень благодарен.

Answer 1

Создание анимации на самом деле довольно просто.Установите интервал для изменения свойств CSS элемента и позвольте вашей функции работать рекурсивно:

var distance      = 300,
    frames        = 30,
    current_frame = 0,
    time          = 1000,
    delta         = Math.floor(distance / frames),
    $element      = $('#my-element'),
    my_timer;

my_timer = setInterval(function () {

    //make sure the end of the animation has not been reached
    if (current_frame < frames) {

        //get the current property you want to animate and add to it the `delta` variable which is how much the property should change in each iteration
        var left = parseInt($element.css('left').replace('px', ''), 10);
        $element.css('left', (left + delta));
    } else {

        //the end of the animation has been reached so stop the interval
        clearInterval(my_timer);
    }
    current_frame++;
}, Math.floor(time / frames));

Вот пример: http://jsfiddle.net/aDLbK/1/

Конечно, это все еще использует функцию .css() jQueryно вы можете удалить эту единственную строку и поместить в любой JavaScript-код, которым хотите манипулировать элементом.

Answer 2

Я думаю, что вы хотите https://github.com/jquery/jquery/blob/master/src/effects.js, но с помощью jquery вы не можете просто извлечь его часть и ожидать, что что-нибудь сработает.Может существовать способ пользовательской сборки jquery, но библиотека эффектов будет иметь много других зависимостей от ядра jquery и т. Д.

Также имеет значение https://stackoverflow.com/a/3143256/138883, в котором говорится о создании пользовательских сборок