【问题标题】:JQuery delay before fadeOut淡出之前的jQuery延迟
【发布时间】:2013-03-29 00:10:54
【问题描述】:

我编写了一个 jquery 脚本,可以让我淡入淡出 div,然后重复。代码工作正常。但是,当我尝试添加延迟时(我希望 div 在淡出之前保持几秒钟),它无法正常工作。我尝试在代码中的几个地方添加延迟,但似乎都没有正常工作。我正在使用 Jquery 1.9.1 版

这是我写的脚本:

$(document).ready(function(){
   ShowPostDiv(0);
});

function ShowPostDiv(divIndex)
{
    $(".home_entry_txt").hide();

    if(divIndex >= $(".rotate_hide").length)
    {
        divIndex = 0;
    }
    var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
    $(".home_entry_txt").html(divPostHtml); 
    $(".home_entry_txt").fadeIn(3000, function(){
             $(".home_entry_txt").fadeOut("slow");
        });
    divIndex++;
    setTimeout("ShowPostDiv("+divIndex+")", 4000);
}

【问题讨论】:

  • 你试过 $(".home_entry_txt").delay(5000).fadeOut("slow"); ?
  • 附带说明,您应该使用带有 setTimeout 的匿名函数,而不是字符串。所以,setTimeout(function() { ShowPostDiv(divIndex); }, 4000);

标签: jquery delay


【解决方案1】:

你可以写

$(".home_entry_txt").fadeIn(3000).delay(1000).fadeOut("slow");

【讨论】:

    【解决方案2】:

    你试过.delay()吗? 类似:

    $(".home_entry_txt").fadeIn().delay(200).queue(function(next) {
    $(".home_entry_txt").fadeOut("slow");
    });
    

    【讨论】:

      【解决方案3】:

      试试这个

      $(document).ready(function(){
         ShowPostDiv(0);
      });
      
      function ShowPostDiv(divIndex)
      {
          $(".home_entry_txt").hide();
      
          if(divIndex >= $(".rotate_hide").length)
          {
              divIndex = 0;
          }
          var divPostHtml = $(".rotate_hide:eq("+divIndex+")").html();
          $(".home_entry_txt").html(divPostHtml); 
          $(".home_entry_txt").fadeIn(3000, function(){
              setTimeout(function(){
                  $(".home_entry_txt").fadeOut("slow");
              },4000);
          });
          divIndex++;
      }
      

      【讨论】:

      • 谢谢!尝试这样做会导致它淡入,停留一段时间,然后淡出。这就是我要的。但是,它不会与下一个 div 重复。我如何让它再次重复以使下一个 div 淡入、停留一段时间然后淡出?
      • 我不确定下一个 div 是什么意思?
      猜你喜欢
      • 1970-01-01
      • 2012-12-27
      • 2014-05-16
      • 2015-09-01
      • 1970-01-01
      • 2010-11-30
      • 1970-01-01
      • 2016-09-05
      • 1970-01-01
      相关资源
      最近更新 更多