Question

I am trying to make a div bounce every 4 seconds and after 15 seconds fadeOut. The code bellow makes the div disappear and the bounce doesn’t happen.

$(document).ready(function(){
    function salta() {
        $('.recomenda').effect("bounce",{ times:4 },300);
    }
    setInterval(salta, 4000);
    $('.recomenda').delay(15000).fadeout('slow');
});

This isn’t doing the job, any hint you can give me?

Kind regards.

With the help of Matt i figured how to do it:

function salta() {
    $('.recomenda').effect("bounce",{ times:4 },300);
}
    var interval = setInterval(salta, 3500);

setTimeout(function (){ 
    clearInterval(interval);
    $('.recomenda').fadeOut('slow');
    }, 15000);

Answer 1

Edit – final version

$(document).ready(function ()
{
    var $recomenda = $('.recomenda');

    function salta()
    {
        $recomenda.effect('bounce', {times:4}, 300);
    }

    salta();
    var interval = setInterval(salta, 4000);

    setTimeout(function ()
    {
        // stop the interval from running unnecessarily
        clearInterval(interval);
        $recomenda.fadeOut('slow');
    }, 15000);
});

There were 2 other problems:

• fadeout() instead of fadeOut()
• Using .delay() was interfering with the bounce effect

Demo: http://jsfiddle.net/mattball/a2F3W/