JQuery задерживается эффект исчезновения - PullRequest
Новая
       8

JQuery задерживается эффект исчезновения

0 голосов
/ 06 декабря 2010

Я просто пытаюсь сделать два простых дополнения к этому фрагменту: 

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

Сначала я бы хотел, чтобы действие body.append происходило со временем.Это просто наложение затемнения, но я хотел бы добавить?

Второй, когда кто-то парит "span # poweroff a", я хотел бы, после определенного времени, чтобы показать "span # poweroff a .message"также исчезая.

Кто-нибудь из гуру, готовый спасти меня, может ли я довольно долго прятаться методом проб и ошибок и исправлять меня?Буду очень признателен!

Ответы [ 2 ]

1 голос
/ 06 декабря 2010

Попробуйте .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. */
  });  
});

Это будет работать как грубая структура (без гарантий, так как я печально известен своими небольшими ошибками).1006 * Удачи!

0 голосов
/ 06 декабря 2010

Вам нужно жестко закодировать оверлейный див, как это: 

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

Тогда jQuery выглядит так: 

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

Если я вас правильно понимаю, когда кто-то нажимает на span # poweroff, он будет медленно показывать наложение div.

Мой вопрос к вам: что произойдет, если вы наведите курсор на диапазон # poweroff a, прежде чем щелкнуть по нему и показать .overlay? Если вы нажмете на него, он активирует отложенное шоу, потому что вам нужно навести на него курсор, чтобы нажать на него.

Вот jQuery без обработки, если нам нужно подождать, пока оверлей не будет виден: 

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