Question

我是jQuery的新手，并试图在我的网站上创建一个区域，其中推荐可以一次淡出一个。我可以得到第一个淡入淡出，延迟，然后淡出的见证，但我不能得到下一个重复的证词（等等）。

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

这是我的jsfiddle： http://jsfiddle.net/PTC3n/14/

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

$('.t1')
.hide()
.fadeIn(3000)
.delay(5000)
.fadeOut(3000);

$('.t2')
.hide();

$('.t3')
.hide();

Answer 1

执行此操作的一个好方法是使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>

我们的blockquote元素中的每个范围都是我们想要向用户显示的不同引用，但我们不希望一次显示它们。然后，我应用CSS规则隐藏元素中包含的所有范围，并带有推荐书ID。

#testimonials span
{
 display:none;
}

此选择器定位元素中包含的所有SPAN元素，其id为推荐

现在我们所有的span标签都被隐藏了。但是你可能会问自己，为什么我删除了你用来定义元素的所有类？好吧，好问题。回到我在帖子开头所说的内容，我希望你的JavaScript能够独立于你的标记运行。虽然我们无法获得真正的独立性，但我们可以通过JavaScript中的以下查询选择器更加智能。

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

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

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

//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();
         });
    });
}

JSFiddle

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

1 个答案: