jQuery CSS Keyframing

Question

Trying to make a simple repeated keyframed animation with 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'
            );
        }
    });
});

I thought this code above would work, but I don't understand jQuery all that much so I can't make it work.

You can see this a JSFIDDLE here:

http://jsfiddle.net/JamesKyle/nPVxb/

It's not doing anything, I want it to switch fonts, did you look at the jsfiddle? — James Kyle
– James Kyle, Commented Nov 30, 2011 at 3:20
its not switching the fonts because chances are the user doesn't have the font (me being one of them). Its switching colors for me — locrizak
– locrizak, Commented Nov 30, 2011 at 3:26
I have the fonts in a separate resource thats being imported through jsfiddle. I know thats not the problem — James Kyle
– James Kyle, Commented Nov 30, 2011 at 3:27

island205 · Accepted Answer · 2011-11-30 03:35:22Z

1

one error first:

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

the colon：

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

answered Nov 30, 2011 at 3:35

island205

1,74017 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Kyle Over a year ago

Okay that just crashed the browser

Shawn31313 Over a year ago

Mine Too. I think its just to much for a browser to check the font-family in a loop.

island205 Over a year ago

yeah,because the while statement has no endless

Community · Accepted Answer · 2017-05-23 12:11:58Z

1

This works.

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

The problem is your .delay() and not your .css()

.delay() is used for items that are part of a queue, like animations.

You can use .queue() or setTimeout()

Read more on this thread: jQuery delay not working

Something like :

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

Fiddle : http://jsfiddle.net/nPVxb/74/

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Nov 30, 2011 at 3:39

Etienne Dupuis

13.8k7 gold badges50 silver badges58 bronze badges

Comments

C.S. · Accepted Answer · 2012-01-18 20:30:28Z

Assuming you want an infinite loop and are working within the scope of an object...

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

Notes: I use an old school method of underscoring private functions on an interface. You don't have to name your variables that way, and they are not private.

You will notice that I store "this" into "handle". You can't always rely on the scope of this, such as calling an object function from an event bubble, calling it from a public interface, or referencing a function internally to the object. So I just do this as a convention.

Put this code into your object, call the 'start' function, and it should continue doing its thing until you leave the page. Also, make sure to clean up your recursive timeouts, less you get an error on page refresh or page navigation.

Collectives™ on Stack Overflow

jQuery CSS Keyframing

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related