jquery toggle wont trigger again

Question

I have 2 functions I want to repeat again and again:

    function rotation () {
        plrotation();
        function plrotation () {
            alert('pl');
            $('#pl').toggle(300).delay(10000).toggle(400).delay(2000, function (){errotation()});
            alert('pl end');
        }
        function errotation () {
            alert('er');
            $('#er').toggle(300).delay(10000).toggle(400).delay(2000, function (){plrotation()});
            alert('er end');
        }
    }

But after the first time, I get the "pl" and "pl end" alert, but the toggle wont happen, and also errotation is not started... Any Idea that I'm doing wrong?

Or maybe is there any other way to do what I need (show element 1 => wait => hide element1 => wait => show element 2 => wait => hide element 2 => wait => restart)

Answer 1

Your last call to jQuery.delay() isn't right. Delay only delays queues, it doesn't take a completion handler like the other animation functions. It's not to be used to replace setTimeout().

So use setTimeout(), not delay().

function rotate(el) { 
   var $el = $(el);
   $el.toggle(300).delay(10000).toggle(400, function() { 
       var next = $el.is('#pl') ? '#er' : '#pl';
       setTimeout(function() { rotate(next); }, 2000); 
   });
}

$(function() { rotate('#pl')});