jQuery的CSS关键帧

试图做一个简单重复的关键帧动画使用jQueryjQuery的CSS关键帧

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

来源

2011-11-30 James Kyle

什么不起作用？ – locrizak

它没有做任何事情，我希望它切换字体，你看看jsfiddle吗？ –

它不切换字体，因为用户没有字体（我是其中之一）。它为我开关颜色 – locrizak

一个错误首先：

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

冒号：

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

来源

2011-11-30 03:35:22 island205

好吧，刚刚崩溃浏览器 –

我也是。我认为它很适合浏览器在循环中检查字体系列。 – Shawn31313

是的，因为while语句没有永无止境 – island205

这作品。

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

来源

2011-11-30 03:39:38

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

... 
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'函数，它应该继续做它的事情，直到你离开页面。此外，请务必清理递归超时，而不是在页面刷新或页面导航时出现错误。

来源

2012-01-18 20:30:28

jQuery的CSS关键帧

回答

相关问题