以下代码从firebase数据库中提取一个列表,该数据库位于名为“messagediv”的div id下。此div id上名为“message div”的CSS设置为none。
然后我运行一个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>
答案 0 :(得分:3)
你想要这样的东西吗?
http://jsfiddle.net/prankol57/ZZskf/
您的主要问题是在加载引号之前开始showNextQuote
。我创建了一个名为started
的变量,以便在第一个项目加载后项目开始淡入。
此外,$(".quotes")
的长度为1.(只有一个div有类&#34;引号&#34;)。我想你想要<div>
所包含的.quotes
元素。那就是$(".quotes div")
。您可能希望添加的每个div元素都有一个名为&#34; .quotes&#34;的类。如果这是你想要的(应该是一个微不足道的变化),你需要弄清楚逻辑。
以下是相关代码:
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);
}
//})();