Javascript 一个接一个地淡入沙发_Javascript_Jquery_Html

Javascript 一个接一个地淡入沙发

javascript jquery html

Javascript 一个接一个地淡入沙发,javascript,jquery,html,Javascript,Jquery,Html,嘿，伙计们，我擅长HTML和CSS，但只有jsut开始触及jQuery的表面。我想让3个div在页面加载中一个接一个地淡入。到目前为止，我有这个 <script type="text/javascript"> $('#1').hide().fadeIn(1500); $('#2').hide().fadeIn(1500); $('#3').hide().fadeIn(1500); </script> $（'#1'）.hide（）.fadeIn

嘿，伙计们，我擅长HTML和CSS，但只有jsut开始触及jQuery的表面。我想让3个div在页面加载中一个接一个地淡入。到目前为止，我有这个

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


$（'#1'）.hide（）.fadeIn（1500）；
$（'#2'）.hide（）.fadeIn（1500）；
$（'#3'）.hide（）.fadeIn（1500）；

我听说，对于任何使用非JavaScript浏览器的人来说，使用css将显示设置为“无”都是一场噩梦，因此我最初使用了隐藏函数来隐藏div

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

使用以下功能：

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


$（'#1'）.hide（）.fadeIn（1500）；
$（'#2'）.hide（）.delay（1500）.fadeIn（1500）；
$（'#3'）.hide（）.delay（3000）.fadeIn（1500）；

您可以选择在适当的时间淡入，例如：

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

这会使它们淡入淡出…与它们在页面中出现的顺序相同，这通常是您所追求的，第一个延迟0，因此它是即时的，第二个延迟1500毫秒（因此当第一个完成时，等等）。在回调中，

是索引，从0开始，因此您可以使用它来快速计算正确的延迟

这里的另一个优点是，这种方法更易于维护，例如，给他们一个类，然后您可以执行以下操作：

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

然后，您需要在JavaScript端进行零维护，以添加额外的

元素使其褪色。


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

$（'#1'）.hide（）.fadeIn（1500，函数（）{
$（'#2'）.hide（）.fadeIn（1500，函数（）{
$（'#3'）.hide（）.fadeIn（1500）；
});
});

淡入命令包含回调功能，请参阅。这意味着您可以将事件链接起来

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

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


$（'1，'2，'3'）。隐藏（）；
$（'1'）.fadeIn（1500，函数（）{$（'2'）.fadeIn（1500，函数（）{$（'2'）.fadeIn（1500）}）；

以下是一种更简洁、通用的方法来实现此效果：请在

逻辑技巧依赖于

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>


$（文档）.ready（函数（）{
功能顺序FADEIN（选择文本、速度、显示、回调）{
显示=显示类型！=“未定义”？显示：“块”；
变量els=$（selectorText），i=0；
（函数助手（）{
els.eq（i++）.fadeIn（速度，助手）.css（“显示”，显示）；
if（callback&&i==els.length）callback（）；
})();
}
sequentialFadeIn（“.toBeFaddedIn”，“slow”，“inline block”，function（））{
log（“我只是一个可选回调”）；
});
});
.你好{
背景颜色：蓝色；
高度：50px；
宽度：50px；
显示：无；
}

the。每个功能都很流畅。如果浏览器中没有Javascript，则没有fadeIn或其他类似效果。因此，在应用fadeIn效果时，您不必担心禁用javascript的浏览器，您可以在noscript部分向它们显示静态内容。回答您关于顺序衰减的主要查询，我已尝试在下面回答。这不起作用。我不得不跳过2个函数，使用3个语句。工作得很好。