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。

我向您提出的问题是，当您在点击它并显示.overlay之前将鼠标移到跨度#poweroff a上时会发生什么？如果你点击它就会激活延迟的节目，因为你必须将鼠标悬停在它上面点击它。

如果我们需要等待叠加层可见，这是jQuery没有处理：

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

jQuery延迟淡入效果

2 个答案: