3

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

4

3 回答 3

1

首先出现一个错误：

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

冒号：</p> 

$(this).delay(40).css(
   'font-family','Homestead'
)
于 2011-11-30T03:35:22.827 回答
1

这行得通。

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

于 2011-11-30T03:39:38.363 回答
0

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

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

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

于 2012-01-18T20:30:28.193 回答