jQuery - hover with delay

Question

I want to make a modification to text inside my span after css will finish my animation (200ms). I want to pass a delay parameter to my hover state, so it would wait. My code is as follows:

$('.overlay').each(function() {
    var text = $(this).children('.category').children('span').text(),
        newtext = text.substring(0,1);

    $(this).children('.category').children('span').text(newtext);

    $(this).delay(5000).hover(function() {
        $(this).children('.category').children('span').delay(5000).stop().text(text);
    }, function() {
        $(this).children('.category').children('span').text(newtext);
    })
});

Unfortunately, it doesn't work, no matter where I place delay. What can I do?

score 1 · Accepted Answer · answered Oct 16 '13 at 12:14

I'm not sure you can use delay for things that aren't effects with that kind of syntax, so why not use Javascript's setTimeout? It seems like it would be simpler.

$(this).hover(function() {
    var that = this;
    setTimeout(function(){
    $(that).children('.category').children('span').text(newtext);
    },5000);
})

jQuery - hover with delay

1 Answers1