jQuery упорядоченные события по клику

Question

Так что у меня есть область на веб-сайте, что он будет делать, когда нажмете загрузить HTML (1), затем, как только HTML (1) загружен, и это нажатие, он загрузит еще несколько HTML (2), затем один раз HTML (2) загружается и щелкает, загружается html (3) и, наконец, после щелчка он переходит на URL.

Как бы этого достичь?

Простой пример поможет мне начать!

Чего я пытаюсь достичь:

<div id="container">

     <div id="advert">
         Click this advert to crack the screen
     </div>
     <div id="crack-1" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-2" style="display:none;z-index:1;position:absolute;"></div>
     <div id="crack-3" style="display:none;z-index:1;position:absolute;"></div>
</div>

1. Таким образом, когда пользователь нажимает #advert в первый раз, отображается # crack-1;
2. когда пользователь нажимает #advert или # crack-1 (так как # crack-1 виден) отображается # crack-2;
3. когда пользователь нажимает #advert, # crack-1 или # crack-2, тогда отображается # crack-3;
4. когда пользователь нажимает #advert, # crack-1, # crack-2 или # crack-3, он переходит на URL.

Answer 1

Как насчет этого:

$("#container").children().click(function(){
    $(this).siblings(":hidden:first").show();
    if($(this).siblings(":hidden").length===0){
        //all are shown!   
    }
});

Answer 2

Вот решение: http://jsfiddle.net/maniator/pQaR3/

JS:

$('#advert').click(function() {
    var self = this;
    if (!$('#crack-1').hasClass('open')) {
        $('#crack-1').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-2').hasClass('open')) {
        $('#crack-2').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else if (!$('#crack-3').hasClass('open')) {
        $('#crack-3').show().addClass('open').click(function() {
            $(self).trigger('click');
        });
    } else {
        //follow some link
    }
})