Question

我对jQuery和javascript有点新鲜。在我的HTML上，我有一个div id="test"，在其下面我有像#testone,#testtwo,...

这样的div

现在，如果我点击按钮#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

试试这个，假设你的所有#test，＃terstone，＃testtwo div都是父容器中的兄弟姐妹：

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;
});
}

Jquery fadeIn（）等到点击

2 个答案: