jQuery CSS 关键帧

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(40).css(
   'font-family':'Homestead'
)

冒号：

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

Answer 2

这有效。

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

问题是您的 .delay() 而不是您的 .css()

.delay() 用于属于队列一部分的项目，例如动画。

您可以使用 .queue() 或 setTimeout()

阅读此线程的更多信息：jQuery 延迟不起作用

类似于：

   $(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 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);
}...

注意：
我使用一种老式方法在界面上强调私有函数。您不必以这种方式命名变量，而且它们不是私有的。

您会注意到我将“this”存储到“handle”中。您不能总是依赖于 this 的范围，例如从事件气泡调用对象函数、从公共接口调用它或在对象内部引用函数。所以我只是按照惯例这样做。

将此代码放入您的对象中，调用“start”函数，它应该继续执行其操作，直到您离开页面。另外，请确保清除递归超时，以免在页面刷新或页面导航时出现错误。