使用jQuery each中的hide/show功能

Question

这段代码不起作用，我该怎么解决？

我隐藏了所有元素..之后，我以7秒的延迟逐个显示它们..

但是所有元素都被显示出来了，我不明白为什么。

$(function()    {
    texts = $('.text-block');
    slide = $('#slideshow');


    // hide everything
    texts.each(function()   {
       $(this).hide(); 
    });

    // show it once by once
    jQuery.each(texts, function()   {
       $(this).show(300);
       $(this).delay(7000);
       $(this).hide(300);
    });
});

- user1270589

Answer 1

由于它从同一点延迟，如果您把延迟放在正确的位置。

$(function()    {
    texts = $('.text-block');
    slide = $('#slideshow');


    // hide everything
    texts.hide(); 

    // show it once by once
    texts.each( function(index)   {
       $(this).delay(7000 * index).show(300);
    });
});

在显示之后，您是否想要再次隐藏它？我将其删除了，因为这只会显示然后隐藏。

简短版：

$(function() {
    $('.text-block').each(function(index){
        $(this).hide().delay(7000 * index).show(300);
    });
});

- Belladonna

---

索引从0开始，也许你需要在延迟函数中使用(index+1)，而texts.hide()应该隐藏所有内容，而不是使用.each。 - Selvakumar Arumugam

根据您是否想要延迟第一个7秒钟，返回True或False。 - Belladonna

没错。好答案，我给你点个赞。 - Selvakumar Arumugam

Answer 2

首先，您不需要使用 .each,

texts = $('.text-block');
texts.hide(); // hides all matched elements

就逐个显示而言，延迟不会阻止整个js线程的执行，那样会阻塞且糟糕，使您的应用程序看起来非常不响应。要逐个显示它们，您需要以不同方式编写它。

也许可以使用递归函数，在延迟后传递下一个元素，使用promise来知道动画和延迟何时完成？

像这样：

http://jsfiddle.net/SbYTL/1/

function ShowItems(items, delay) {
    $(items[0]).fadeIn(300)
        .delay(delay)
        .fadeOut(300)
        .promise()
        .done(function() {
            items.splice(0, 1);
            if (items.length > 0)
            {
                ShowItems(items, delay);    
            }            
    });       
}

var items = $(".text-block").hide();  
ShowItems(items, 7000);

- Patrick Lee Scott

---

更新了 jsfiddle 示例以完全匹配您的问题，并提供了使用示例。 - Patrick Lee Scott

Answer 3

请使用.throttle进行检查。

- bvulaj

---

不是一个坏主意，但似乎在使用foreach时可能会有些困难。 - Patrick Lee Scott

Answer 4

$(function() {
    $('.text-block').hide().each(function(item, index) {
         $(item).delay(7000*index).show(300, function() {
             $(this).delay(7000).hide(300);
         });
    });
});

- adeneo