一个接一个地淡入淡出

嘿，那里的家伙，我很好用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的浏览器，所以我用的隐藏功能最初隐藏的div任何人的噩梦。

但是，这只能一次消除它们。有什么建议吗？

来源

2010-09-22 Alex Sadler

如果在浏览器中没有Javascript，则不会淡入或其他类似效果。因此，在应用淡入效果的同时，不用担心javascript禁用的浏览器，您可以在noscript部分中显示静态内容。 – Atharva 2012-11-25 09:21:12

回答连续衰落的主要查询我试图在下面回答它。 – Atharva 2012-11-25 09:21:38

使用Delay功能如下：

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

来源

2010-09-22 11:12:24

您可以.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>元素褪色。

来源

2010-09-22 11:12:24

@downvoter - 谨慎评论？ – 2010-09-22 11:22:43

。每个功能都是光滑的 – espais 2010-09-22 11:44:46

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

来源

2010-09-22 11:14:07

这不起作用。我不得不跳过2个函数并使用3个语句。完美工作。 – Juice 2017-07-18 02:06:11

淡入命令包含回叫功能，请参阅documentation。这意味着你可以链接事件。

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

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

来源

2010-09-22 11:15:46

下面是一个更清洁和通用的方法来实现这样的效果：检查出来上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>

来源

2012-11-24 18:42:52 Atharva

一个接一个地淡入淡出

回答

相关问题