jquery - 在 jquery 中分别使用隐藏/显示

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

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

Answer 2

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

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

就一一展示而言，延迟并不会停止整个 js 线程的执行，这将是阻塞且糟糕的，并使您的应用程序看起来非常无响应。要一一展示它们，您必须编写它不同

也许是一个递归函数，你在延迟之后传递下一个元素，使用承诺知道动画和延迟何时完成？

像这样：

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);

Answer 3

改用签出.throttle。

Answer 4

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