一個接一個地淡入淡出

嘿，那裏的傢伙，我很好用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

一個接一個地淡入淡出

回答

相關問題