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 delay not working

类似的东西：

   $(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”中。您不能总是依赖于此范围，例如从事件气泡调用对象函数，从公共接口调用它，或在内部引用函数到对象。所以我只是将其作为惯例。

将此代码放入您的对象，调用'start'函数，它应该继续执行它的操作直到您离开页面。此外，请确保清除递归超时，减少页面刷新或页面导航时出错。

jQuery CSS Keyframing

3 个答案: