以下代码从 Firebase 数据库中提取一个列表，该列表属于名为“messagediv”的 div id。此名为“message div”的 div id 上的 CSS 设置为不显示。
然后，我运行一个 javascript 脚本，该脚本获取具有该 css 的元素并将其淡入和淡出。问题在于它会淡入和淡出整个列表，而不是仅列表中的一项。
例如，它淡入和淡出整个列表:
this is the first item of the list:
this is the second item of the list:
this is the third item of the list:
但我只希望它一次淡入淡出一个，所以它会先淡出:
this is the first item of the list:
然后它会在这一秒消失:
this is the second item of the list:
下面是我到目前为止淡入和淡出整个列表的代码，但我只希望它一次淡入和淡出列表中的一项。
<html>
<head>
<script src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>
.quotes {display: none;}
</style>
</head>
<body>
<div id='messagesDiv' class="quotes"></div>
<script>
var myDataRef = new Firebase('https://helloworldtest.firebaseio.com');
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
<script type="text/javascript" language="javascript">
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
</script>
</body>
</html>
最佳答案
你想要这样的东西吗？
http://jsfiddle.net/prankol57/ZZskf/
你的主要问题是你开始showNextQuote在加载报价之前。我创建了一个名为 started 的变量这样，一旦第一个元素加载完毕，这些元素就开始淡入。
此外，$(".quotes")的长度是 1。(只有一个 div 具有类“quotes”)。我想你想要 <div> .quotes 内的元素。这就是$(".quotes div") 。您可能希望添加的每个 div 元素都有一个名为“.quotes”的类。如果这是您想要的，您需要弄清楚逻辑(应该是一个微不足道的更改)。
相关代码如下:
var myDataRef = new Firebase('https://helloworldtest.firebaseio.com');
var started = false;
myDataRef.on('child_added', function (snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
console.log("before", $(".quotes"));
$('<div/>').text(text).prepend($('<em/>').text(name + ': ')).appendTo($('#messagesDiv'));
console.log("after", $(".quotes"));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
if (!started) {
// We should only start showing next quote when the message has loaded
showNextQuote();
started = true;
}
};
// The loading procedure needs access to this so we can't use an anonymous function
//(function() {
var quoteIndex = -1;
function showNextQuote() {
// We get the div elements inside ".quotes"
var quotes = $(".quotes div");
++quoteIndex;
console.log("Showing next quote", quoteIndex, quotes);
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
//})();
关于javascript - 如何一次淡入和淡出列表中的一项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24480143/