Javascript 如何重复淡入和淡出容器元素的跨度

我是jQuery的新手，尝试在我的网站上创建一个区域，在那里，推荐信可以一次一个地淡入淡出。我可以让第一份推荐信淡入，延迟，然后淡出，但我不能让下一份推荐信重复（等等）

另外，我如何编写代码，使其成为一个循环

以下是我的JSFIDLE：

您的服务令人惊叹，您对细节的关注度更高。我们一定会再次雇用你做这项工作！
这是另一个证明，告诉我们服务有多好，他们希望再次雇用我们。
再一次，这是另一个证明我们是多么的棒。
$（'.t1'）
.hide（）
法丹先生（3000）
.延迟（5000）
.衰减（3000）；
$（'.t2'）
.hide（）；
$（“.t3”）
.hide（）；

一个好方法是让JavaScript独立于标记运行。我做的第一个更改是修改blockquote标记，使其具有Id属性

<blockquote id='testimonials'>    
    <span>Your service was amazing and your attention to detail was even better. We surely will hire you to do the job again!</span>
    <span>This is another testimonial here telling how good the service was and how they'd like to hire us again.</span>
    <span>And once more this is another testimonial here that will show how awesome we are.</span>
</blockquote>

此选择器以id为证明的元素中包含的所有跨度元素为目标

很好，现在我们所有的跨度标签都隐藏了。但您可能会问自己，为什么我删除了所有用于定义元素的类？好问题。回到我在文章开头所说的，我希望JavaScript独立于标记运行。虽然我们无法获得真正的独立性，但使用JavaScript中的以下查询选择器，我们可以稍微聪明一点

var testimonials = $('#testimonials span');

这将返回一个包含三个jQuery对象的数组，表示每个span标记。现在我们有了一个数组，可以迭代来打开和关闭它。这样做的好处是，您的标记（T1、T2）中不再有用JavaScript表示支持对象的类。您可以自由地向blockquote元素添加更多span标记，淡入淡出将正常工作。该解决方案使用注释性函数回调。这些是您在fadeIn和fadeOut线上看到的参数。动画完成后将调用这些函数。在这种情况下，1秒钟后

下面是完整的函数，JSFIDLE包含在底部

//get all testimonials
var testimonials = $('#testimonials span');
//set a starting index of 0
var index = 0;

//Start displaying testimonials
displayTestimonial();

function displayTestimonial()
{
    //Check to see if we need to reset back to the first index
    if(index + 1 > testimonials.length)
    {
        index=0;
    }

    //Display a testmonial and when testimonial is complete fade it out
    $(testimonials[index]).fadeIn(1000, function()
    {
        //Fade testimonial out and when complete increment the current span index and 
        $(testimonials[index]).fadeOut(1000, function() 
         {
             index++;
             //Have the function call itself                                 
             displayTestimonial();
         });
    });
}

---

太棒了！今天我将学习它，以便更好地理解它。谢谢。cgatian，我该如何编写它，使它淡入但保持静止几秒钟，然后淡出。现在，它淡入淡出。谢谢。这似乎与Chrome不兼容。没有优雅的淡入。不过，它在FFox中工作得很好。我是用Chrome写的

var testimonials = $('#testimonials span');

//get all testimonials
var testimonials = $('#testimonials span');
//set a starting index of 0
var index = 0;

//Start displaying testimonials
displayTestimonial();

function displayTestimonial()
{
    //Check to see if we need to reset back to the first index
    if(index + 1 > testimonials.length)
    {
        index=0;
    }

    //Display a testmonial and when testimonial is complete fade it out
    $(testimonials[index]).fadeIn(1000, function()
    {
        //Fade testimonial out and when complete increment the current span index and 
        $(testimonials[index]).fadeOut(1000, function() 
         {
             index++;
             //Have the function call itself                                 
             displayTestimonial();
         });
    });
}