jQuery CSS 关键帧答案

【问题标题】：jQuery CSS KeyframingjQuery CSS 关键帧
【发布时间】：2012-01-09 09:07:14
【问题描述】：

尝试用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/

【问题讨论】：

它什么也没做，我要它切换字体，你看看jsfiddle吗？
它没有切换字体，因为用户可能没有字体（我就是其中之一）。它为我切换颜色
我将字体放在一个单独的资源中，该资源是通过 jsfiddle 导入的。我知道那不是问题
为什么它会改变颜色？
因为我也在用webkit动画

标签： jquery css animation keyframe

【解决方案1】：

这行得通。

$(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/

【讨论】：

【解决方案2】：

假设你想要一个无限循环并且在一个对象的范围内工作......

...
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 的范围，例如从事件气泡调用对象函数、从公共接口调用它或在对象内部引用函数。所以我只是将其作为惯例。

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

【讨论】：

【解决方案3】：

先出现一个错误：

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

冒号：

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

【讨论】：

好吧，浏览器崩溃了
我的也是。我认为浏览器在循环中检查字体系列的意义重大。
是的，因为while语句没有无穷无尽的