好吧，不可否认，这是我第一次使用java脚本和jQuery。我正在尝试显示<p> </p>标记，将其淡出，然后淡入另一个标记。淡出部分工作正常，但之后其他标签不显示。您可以看到容器的边框更改大小以容纳更大的文本区域，但您无法看到文本。第22-23行是文本应该淡入的地方。我查看了jQuery文档，但似乎无法找到它的原因。我已经尝试将.css调用放在表达式的前面，但我得到的只是文本弹出而不是淡入。我从网上的来源获得了想法，并试图将其更改为适应我的需要。我现在最后重新写了整件事。这是我的代码。
// JavaScript Document
var i = 1;
$(document).ready(function () {
jQuery.fn.timer = function () {
var $quote = $('#quote')
var number = $('#quote').children('p');
$quote.children('p').eq(i - 1).animate({
opacity: 0
}, 1000, function () {
$quote.children('p').eq(i - 1).css({
'display': 'none',
'visibility': 'hidden'
});
}).delay(1000);
i++;
if (i > number.length) {
i = 1;
}
$quote.children('p').eq(i - 1).animate({
opacity: 100
}, 1000, function () {
$quote.children('p').eq(i - 1).css({
'display': 'block',
'visibility': 'visible'
});
});
};
window.setInterval(function () {
$('#quote').timer();
}, 10000);
});
我的样式的html看起来像这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery_V_1.9.1.js"> </script>
<script type="text/javascript" src="quotes_3.js"> </script>
<style>
#quote{
background: white;
border: 2px solid #333;
display: block;
margin: 0 auto;
padding: 10px;
width: 100px;
}
#quote p{
color: #333;
display: none;
font-weight: bold;
text-align: center;
display: none;
visibility: hidden;
}
#quote p:first-child{
display: block;
visibility: visible;
}
</style>
</head>
<body>
<div id="quote">
<p> Funny stuff happens with Java script </p>
<p> this is turning out to be more work than I thought it would be!!</p>
<p> I like Java more!!</p>
</div>
</body>
</html>
任何想法都将不胜感激。我在6小时前开始使用无法编译的东西。好像我可以制作动画GIF来获得同样的效果，哈哈。
（编辑）我终于得到了要显示的文字，但没有淡出效果。但容器正在增长以容纳所有三个<p> </p>标签。这是为什么？
答案 0 :(得分：3)
jQuery已经有fadeOut和fadeIn个功能。无需重新发明轮子。
$(document).ready(function(){
var quote = "Another quote!";
$("#quote").text().fadeOut(1000);
$("#quote").text(quote).fadeIn(1000);
}
更新：
如果您想同时进行动画和渐变，请尝试以下操作：
$("#quote").animate({ opacity: 1, top: "-10px" }, 'slow');
但是，这似乎不适用于display：none元素（如fadeIn所做）。所以，您可能需要事先说明这一点：
$("#quote").css('display', 'block');
$("#quote").animate({ opacity: 0 }, 0);
答案 1 :(得分：2)
我打破了你的代码，并对其进行了优化，以产生我认为你正在寻找的效果。我相信这可能是你正在寻找的功能，虽然我觉得你的问题可以更明确地阐述; (1:desired-functionality; 2:current-efforts; 3:quandary-details)
我制作的JavaScript通过以下方式重新创建我对所需效果函数的解释：淡化所有引用内容，然后淡入'active_quote'，在我们移动时相应地设置索引。
$(function(){
var $quotes=$('#quote>p');
var quote_lifetime = 3*1000;
var quote_fadetime = 200;
//--------
var active_quote=0;
var number_of_quote_innards=$quotes.length;
function displayActiveQuote(){
$quotes.fadeOut(quote_fadetime); // Fade out all quote contents
setTimeout(function(){ // After fadeOut'ing everything, we fade in the active quote.
$( $quotes[active_quote] ).fadeIn(quote_fadetime);
active_quote++; // incrementing the active_quote, and resetting it to zero if it's exceeded its bounds.
if (active_quote > number_of_quote_innards-1) active_quote=0;
},quote_fadetime);
}
displayActiveQuote();
setInterval(displayActiveQuote,quote_lifetime);
});
然后我修改了CSS ，因为它不再与此功能相关。你可以随意设置这个引用框的样式 - 但请注意，对于引号之间的确切时刻，可以使用min-height来显示高度无限小的故障，因为两个引号都是可见的，或者没有引号对于单个框架是可见的。要解决此问题，我建议使用固定的height代替。
的 //大通。 的
<小时/>
此编辑解决了Craig对同时滑动和淡入功能的渴望。
使用JavaScript，我已将fadeOut&&fadeIn对更改为animate({opacity:0,height:0},quote_fadetime)和animate({opacity:1,height:'100%'},quote_fadetime)，以及其他一些内容以适应此目的。
（更新后的代码）：
$(function(){
var $quotes=$('#quote>p');
var quote_lifetime = 3*1000;
var quote_fadetime = 800;
//--------
var active_quote=0;
var number_of_quote_innards=$quotes.length;
function displayActiveQuote(){
$quotes.animate({opacity:0,height:0},quote_fadetime); // all quotes disappear
setTimeout(function(){
$($quotes[active_quote]).animate({opacity:1,height:'100%'},quote_fadetime); // active quote appears
active_quote++; // here we increment the active_quote, and reset it to zero if it's exceeded its bounds.
if (active_quote > number_of_quote_innards-1) active_quote=0;
},quote_fadetime);
}
displayActiveQuote();
setInterval(displayActiveQuote,quote_lifetime);
});
我想注意，使用了setTimeout而不是jQuery animate的完成回调，因为在这个例子中，动画完成回调会触发三次，每次为每个动画引用一次远。我们只希望这种情况发生一次，淡出主动报价。
这是CSS：
#quote {
width:50%;min-width:210px;
height:6em; overflow:hidden;
padding:0.5em 1em; margin:0 auto;
/*----*/
border:2px solid #CCC; font-style:italic;
color:#555;border-radius:8px; }
#quote>p {
opacity:0; height:0; margin:0; }
干杯，克雷格！的 //大通。
答案 2 :(得分：1)
这是一种涉及更少代码（demo）
的方法$(document).ready(function () {
$("#quote p").each(function(index) {
$(this).delay(5000*index).fadeIn(300);
});
});
不比@ aguyfromhere少得多：P
答案 3 :(得分：0)
您必须先将display: block; visibility: visible; 设置为，然后将不透明度设置为100，否则您将为不可见元素的不透明度设置动画。