Question

嘿那些人，我很擅长HTML和CSS，但只有jsut开始划伤jQuery的表面。我希望在页面加载上逐个淡入3个div。到目前为止我有这个

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().fadeIn(1500);
    $('#3').hide().fadeIn(1500);
</script>

我听说使用css将显示设置为none对任何拥有非JavaScript浏览器的人来说都是一场噩梦，所以我使用hide函数来初始隐藏div。

但这只会让他们一下子消失。有什么想法吗？

Answer 1

你可以.delay()每个，以便在正确的时间淡入之前，例如：

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

这会使它们以与页面相同的顺序逐渐消失，这通常是你所追求的，第一个是延迟0所以它是瞬间，第二个是延迟1500ms（所以第一次完成时等等））。在.each()回调i是索引，从0开始，因此您可以使用它来快速计算正确的延迟。

这里的另一个优点是这种方法更容易维护，例如给他们一个类，然后就可以了：

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

然后，您需要在JavaScript端进行零维护，以便添加其他<div>元素以淡入淡出。

Answer 2

淡入命令包含回调函数，请参阅documentation。这意味着您可以链接事件。

<script type="text/javascript">
    $('#1, #2, #3').hide();

   $('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>

Answer 3

<script type="text/javascript">
    $('#1').hide().fadeIn(1500, function(){
        $('#2').hide().fadeIn(1500, function(){
             $('#3').hide().fadeIn(1500);
        });
    });
</script>

Answer 4

使用Delay功能如下：

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().delay(1500).fadeIn(1500);
    $('#3').hide().delay(3000).fadeIn(1500);
</script>

Answer 5

以下是实现此效果的更简洁，更通用的方法：在http://jsfiddle.net/BztLx/20/

上查看

逻辑技巧依赖于fadeIn的回调功能，并使用.eq()作为所选元素的迭代器。

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {

    display = typeof display !== 'undefined' ? display : "block";

    var els = $(selectorText), i = 0;

    (function helper() {
        els.eq(i++).fadeIn(speed, helper).css("display", display);
        if (callback && i === els.length) callback();
    })();
}

sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
    console.log("I am just an optional callback");
});
});
</script>

</head>
<body><style media="screen" type="text/css">
.hello {
    background-color: blue;
    height:50px;
    width: 50px;
    display: none;

}
</style>

<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>

</body></html>

一个接一个地淡入div

5 个答案: