Question

我想要的是淡入，等待10秒，然后淡出。相反，它正在消失，然后立即消失。

看来这段代码根本没有运行：

        .delay(delayInMS)  //delayInMS is 10000 aka 10 seconds.

这不是完整的代码库，但它是导致问题的最小部分。我需要两个带有这些签名的函数，我不知道为什么没有发生延迟。

代码：

<input type="button" value="Go!">
<div>Hello!</div>

CSS：

div
{
  display: none;
  padding: 20px;
  font-size: 20;
  color: white;
  background-color: green;
}

使用Javascript：

$(document).ready(function()
{
    $('input').on('click', function()
    {
        showDiv();
    });
    function showDiv()
    {
        var $div = $('div');
        $div.stop(true, true)
          .fadeTo(0, 0)
          .show()
          .fadeTo(1000, 1, function()
          {
              hideDiv(10000)
          });
    }
    function hideDiv(delayInMS)
    {
        var $div = $('div');
        $div.stop(true, true)
            .delay(delayInMS)  // <-- This appears not to delay
            .fadeTo(1000, 0, function()
            {
                $div.hide();
            });
    }
});

JsFiddle Example

Answer 1

而不是使用.delay()为什么不使用setTimeout来处理淡出？

function hideDiv(delayInMS)
  {
     var $div = $('div');
     $div.stop(true, true)
     setTimeout(function(){
        $div.fadeTo(1000, 0, function()
          {
            $div.hide();
          });
     }, delayInMS);
   }

FIDDLE

Answer 2

奇怪的是，忽略stop之后的第一次延迟。如果你加上额外的延迟，第二个延迟将按计划运行：

e.g。 http://jsfiddle.net/TrueBlueAussie/mfzgctxc/2/

这显然不是一个理想的解决方案，所以我会继续调查：）

由于您只在完成showDiv时调用hideDiv，因此实际上并不需要hideDiv中的stop，因此您可以恢复为http://jsfiddle.net/TrueBlueAussie/mfzgctxc/5/也可以。

Answer 3

我唯一的工作就是使用setTimeout()代替delay()。这个解决方案类似于 jmore009s answer但只允许执行一个fadeTo()：

    var hideTimeout = setTimeout(void(0), 10);
    function hideDiv(delayInMS)
    {
        clearTimeout(hideTimeout);
        var $div = $('div');
        $div.stop(true, true);

        hideTimeout = setTimeout(function()
        {
            $div.fadeTo(1000, 0, function()
            {
                $div.hide();
            });
        }, delayInMS);
    }

Answer 4

这是

fiddle

将更多延迟更改.fadeTo(5000, 50, function() 5000按照您的意愿

5000是延迟时间，因此可以根据需要更改延迟时间

在元素上的Stop（true，true）之后，延迟似乎没有延迟

4 个答案:

fiddle