在元素上的 Stop(true, true) 之后延迟似乎没有延迟

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

这里是

fiddle

根据您的意愿进行更多延迟更改.fadeTo(5000, 50, function()5000

5000是延迟时间，请随意更改延迟时间

Answer 2

奇怪的是，stop 之后的第一个延迟被忽略了。如果你链接一个额外的延迟，第二个将按计划工作：

例如http://jsfiddle.net/TrueBlueAussie/mfzgctxc/2/

这显然不是一个理想的解决方案，所以我会继续研究:)

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

Answer 3

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

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

FIDDLE

Answer 4

我唯一的解决方法是使用 setTimeout() 而不是 delay()。这个解决方案类似于但只允许一个 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);
    }

在元素上的 Stop(true, true) 之后延迟似乎没有延迟

Delay doesn't appear to delay after a Stop(true, true) on an element

javascript

jquery

animation

fiddle