Jquery fadeIn () дождаться нажатия

Question

Я немного новичок в jQuery и javascript. На моем HTML у меня есть div id="test", под которым у меня есть div как #testone,#testtwo,...

Теперь, если я нажму на кнопку #clickme, эффект затухания наступит, но исчезнет очень скоро, даже до того, как он достигнет #testthree.

Я хочу, чтобы он был там, пока пользователь не щелкнет где-нибудь на документе. И есть ли более аккуратный способ сделать это, чем повторять элементы?

$( '#clickme' ).click( function() {
    $("#test").fadeIn(function(){
      $("#testone").show().fadeIn("3000", function(){
        $("#testtwo").fadeIn("4500", function(){
          $("#testthree").fadeIn("6000", function(){
        $("#testfour").fadeIn("7500", function(){
          $("#testfive").fadeIn("9000", function(){
            return false;
              });
            });
          });
        });
      });   
    });
});

$(document).click( function() {
    $( '#test' ).hide(1000);
    return false; 
});

Answer 1

Попробуйте, предполагая, что все ваши div #test, #testone, #testtwo являются братьями и сестрами внутри родительского контейнера:

function fade_in_recursive(e,duration,callback)
{
    $(e).fadeIn(duration,function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            fade_in_recursive($(e).next(),duration,callback);
        }
    });

} // End function

$('#click_me').click(function(){
    fade_in_recursive($('#test'), 1000, function(){alert('all done');});
});

Пример: http://jsfiddle.net/AlienWebguy/9npvz/2/

Answer 2

Вы можете попробовать это

    var flag = false;
    $( '#clickme' ).click( function() {
    $("#test").fadeIn(function(){
      $("#testone").show().fadeIn("3000", function(){
        $("#testtwo").fadeIn("4500", function(){
          $("#testthree").fadeIn("6000", function(){
        $("#testfour").fadeIn("7500", function(){
          $("#testfive").fadeIn("9000", function(){
            flag = true;
            afterClick(flag);
            return false;
              });
            });
          });
        });
      });   
    });
});

function afterClick(flag){
$(document).click( function() {
  if(flag == true){
    $( '#test' ).hide(1000);
    return false; 
  }
  flag = false;
});
}