jQuery 延迟淡入效果

Question

我只是想对此片段做两个简单的调整：

$(document).ready(function() {
   $("span#poweroff a").click(function() {
      $("body").append('<div class="overlay"></div>');
   });
 });

首先，我希望 body.append 操作随着时间的推移而发生。这只是一个遮光叠加，但我想淡入？

其次，当有人悬停“span#poweroff a”时，我希望在一段时间后显示“span#poweroff a .message”，也可以淡入。

任何大师都愿意拯救我，我能在很长一段时间内得到什么时间让我不断尝试和犯错并让我恢复正常？非常感谢！

Answer 1

尝试.delay()。这可能就是您正在寻找的。至于您的代码，以下是您可能正在寻找的功能：

$(document).ready(function()
{
  $('span#poweroff').click(function()
  {
    $('body').append('<div class="overlay"></div>'); /* Make sure it's hidden via CSS, and has *some* uniqueness. */
    $('.overlay:eq(0)').fadeIn(); /* ':eq(0)' selects the first .overlay element. If you want all of them to animate, remove ':eq(0)'. I would use an ID for this, though, so if you decide to, replace the selector with '#your_id'. It's not too hard */
  });

  $('span#poweroff a').hover(function()
  {
    $('span#poweroff a .message').delay(1000)fadeIn(); /* You can set your speeds here too. If you won't use the delay, just omit the function. */
  }, function() {
    $('span#poweroff a .message').fadeOut(); /* If you want to, it can fade out. Otherwise, omit this function. */
  });  
});

这将作为一个粗略的框架（没有保证，因为我因犯小错误而臭名昭著）。

祝你好运！

Answer 2

您需要像这样对覆盖 div 进行硬编码：

<div class="overlay" style="display:none;"></div>

然后像这样使用 jQuery：

    $(document).ready(function() {
   $("span#poweroff a").click(function() {
      $('.overlay').fadeIn('slow');
   });
 });

如果我理解正确的话，当有人单击 span#poweroff 时，它会慢慢显示覆盖 div。

我的问题是会发生什么当您将鼠标悬停在 span#poweroff a 上然后单击它并显示 .overlay 时？如果您单击它，它将激活延迟显示，因为您必须将鼠标悬停在它上面才能单击它。

如果我们需要等待覆盖层可见，这里是没有处理的 jQuery：

    $(document).ready(function() {
       $("span#poweroff a").mouseenter(function() {
          $('.message').fadeIn('slow');
       });
       $("span#poweroff a").mouseleave(function() {
          $('.message').fadeOut('slow');
       });
     });