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

首先，您不需要使用.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);

Answer 2

因为如果你把延迟放在正确的位置，它会从同一点延迟。

$(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 3

请使用.throttle结账。

Answer 4

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

在jquery中使用hide / show

4 个答案: