Есть ли способ анимировать элемент в jQuery и запустить функцию для каждого пикселя в высоту изменилась? - PullRequest
Новая
       14

Есть ли способ анимировать элемент в jQuery и запустить функцию для каждого пикселя в высоту изменилась?

1 голос
/ 12 декабря 2011

У меня есть относительно базовый сценарий, где у меня есть nav HTML-элемент, который может быть расширен (изменяет высоту элемента) на основе пары различных триггеров и скольжения контента вниз по навигации.

Элемент nav равен position:fixed и реагирует на стрельбу ребенка .slideDown().

У меня есть второй элемент, плавающий слой position:absolute, значение которого top css зависит от того, где заканчивается элемент nav.

Так что нижняя часть nav = верхняя часть #layer.

Сложность, с которой я сейчас сталкиваюсь, заключается в прикреплении позиции top к bottom контейнера nav при изменении высоты nav.

Есть ли что-нибудь, что позволило бы мне сделать это?

У меня есть контроль и перехватывает анимацию и запуск событий, чтобы я мог легко прикрепить функцию к анимации анимации slideDown/Up, которая изменяет высоту nav, я просто не могу понять, как я могу запустить функцию для каждого пиксель изменен.

Любые идеи будут высоко оценены.

Спасибо за чтение.

Обновление

Следуя совету, я переписал slideDown для использования функции animate, чтобы можно было передать функцию step следующим образом: 

$('.sometrigger').click(function() {
    $("nav > ul").animate({
        'height':'show'
    }, {
        duration : 900,
        easing   : 'linear',
        step     : function(e) {
            console.log('step', $(this).height() );
        },
        complete : function() {
            $('nav').removeClass('closed').addClass('open');
        }
    });
});

Вот вывод журнала консоли для каждого шага: 

step 72
step 96
step 1
step 2
step 3
step 4
step 5
step 7
step 6
step 8
step 7
step 9
step 8
step 11
step 9
step 12
step 11
step 14
step 12
step 15
step 13
step 17
step 14
step 18
step 15
step 20
step 16
step 21
step 17
step 23
step 18
step 24
step 20
step 26
step 21
step 27
step 22
step 29
step 23
step 30
step 24
step 32
step 25
step 33
step 26
step 35
step 27
step 37
step 29
step 38
step 30
step 39
step 31
step 41
step 32
step 42
step 33
step 44
step 34
step 45
step 35
step 47
step 36
step 48
step 37
step 50
step 39
step 51
step 40
step 53
step 41
step 54
step 42
step 56
step 43
step 57
step 44
step 59
step 45
step 60
step 46
step 62
step 47
step 63
step 48
step 65
step 49
step 66
step 51
step 68
step 52
step 69
step 53
step 71
step 54
step 72
step 55
step 74
step 56
step 75
step 57
step 77
step 58
step 78
step 60
step 80
step 61
step 81
step 62
step 82
step 63
step 84
step 64
step 85
step 65
step 87
step 66
step 88
step 67
step 90
step 68
step 91
step 70
step 93
step 71
step 94

1 Ответ

3 голосов
/ 12 декабря 2011

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

Из документации jQuery :

.animate( properties, options )

properties: карта свойств CSS, котораяанимация будет двигаться в направлении.
options: карта дополнительных параметров, передаваемых методу.

Поддерживаемые ключи:

duration: строка или число, определяющее, как долго будет выполняться анимация.
easing: строка, указывающая, какую функцию замедления использовать для перехода.
complete: функция, вызываемая после завершения анимации.
step: функция, вызываемая после каждого шага анимации.
queue: логическое значение, указывающее, помещать ли анимацию в очередь эффектов.Если false, анимация начнется немедленно.Начиная с jQuery 1.7, параметр очереди также может принимать строку, и в этом случае анимация добавляется в очередь, представленную этой строкой.
specialEasing: карта одного или нескольких изСвойства CSS, определенные аргументом свойств и соответствующими им функциями замедления (добавлено 1.4).

В зависимости от установленного времени и скорости анимации, нет гарантии, что функция шага будет запущена длякаждый пиксель, но он будет запускаться для каждого шага анимации (некоторые из которых могут быть несколькими пикселями, а не одним).

Вот рабочий пример функции шага: http://jsfiddle.net/jfriend00/8bKz3/.

...