JQuery CSS Keyframing

Question

Попытка сделать простую повторяющуюся анимацию по ключевым кадрам с помощью jQuery

$(document).ready(function() {
    $('body').mouseover(function() {
        var animateloop = 0;

        $(this).mouseout(function(){
            animateloop++;
        });

        while (animateloop !== 1) {
            $(this).delay(40).css(
                'font-family':'Homestead'
            ).delay(40).css(
                'font-family':'Arvo'
            );
        }
    });
});

Я думал, что этот код будет работать, но я не очень разбираюсь в jQuery, поэтому не могу заставить его работать.

Вы можете увидеть это JSFIDDLE здесь:

http://jsfiddle.net/JamesKyle/nPVxb/

Answer 1

Это работает.

$(this).delay(400).css({
   'font-family':'Homestead'
});

Проблема в вашем .delay (), а не в .css ()

.delay () используется для элементов, которые являются частью очереди, например анимации.

Вы можете использовать .queue () или setTimeout ()

Подробнее об этой теме: jЗадержка не работает

Что-то вроде:

   $(document).ready(function() {
    $('body').mouseover(function() {

        setTimeout(function() {changefont('arial');}, 400);
        setTimeout(function() {changefont('courrier new');}, 800);
        setTimeout(function() {changefont('impact');}, 1200);

    });
});


function changefont(fontname) {
    $('body').css({'font-family':fontname});
}

Скрипка: http://jsfiddle.net/nPVxb/74/

Answer 2

одна ошибка первая:

$(this).delay(40).css(
   'font-family':'Homestead'
)

двоеточие:

$(this).delay(40).css(
   'font-family','Homestead'
)

Answer 3

Предполагая, что вы хотите бесконечный цикл и работаете в рамках объекта ...

...
animation : ["first","second","third","etc"],
frameDelay : 400,
frameIndex : 0,
animationTimer : null,
start : function() {
    // remember the scope of this object.
    var handle = this;
    // start the animation.
    handle._nextFrame(handle);
},
_nextFrame : function(handle) {
    // TODO: use frameIndex to render stuff... such as:
    var animation = handle.animation[frameIndex];
    $('body').html('<p>'+animation+'</p>');
    // count your frames. You might add stuff to the sequence elsewhere.
    var numFrames = handle.animation.length;
    frameIndex = frameIndex < numFrames ? frameIndex++ : 0;
    handle.animationTimer = window.setTimeout(function() {
        handle._nextFrame(handle); }, handle.frameDelay);
},
_destroy : function() {
    var handle = this;
    clearTimeout(handle.animationTimer);
}...

Примечания: Я использую метод старой школы подчеркивания частных функций на интерфейсе. Вам не нужно называть свои переменные таким образом, и они не являются частными.

Вы заметите, что я храню «это» в «ручке». Вы не можете всегда полагаться на область этого, например, на вызов функции объекта из пузыря событий, вызов ее из открытого интерфейса или ссылку на функцию внутри объекта. Поэтому я просто делаю это как соглашение.

Поместите этот код в ваш объект, вызовите функцию 'start', и он должен продолжать делать свое дело, пока вы не покинете страницу. Кроме того, убедитесь, что вы удалили рекурсивные тайм-ауты, чтобы не было ошибок при обновлении страницы или навигации по странице.