Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Как добавить задержку? (https://javascript.ru/forum/project/42495-kak-dobavit-zaderzhku.html)

SnakeAce 29.10.2013 12:10

Как добавить задержку?
 
$( ".uk-menu-home" ).hover(
  function() {
    $( this ).addClass('uk-open');
  },  
  function() {
    $( this ).removeClass('uk-open');
  }
);
Суть скрипта проста, при наведении на элемент добавляется класс. А как сделать так, что бы существовала задержка перед удаление класса, после того как мы уберем курсор от элемента?

keen 29.10.2013 12:23

$( ".uk-menu-home" ).hover(
  function() {
    $( this ).addClass('uk-open');
  },  
  function() {
    setTimeout(function () {
        $( this ).removeClass('uk-open');
    }, 1000);
  }
);

только по-хорошему надо ещё добавлять переменную-флаг, на случай многократного быстрого наведения/уведения курсора ссылок.

SnakeAce 29.10.2013 12:44

Цитата:

Сообщение от keen (Сообщение 278534)
$( ".uk-menu-home" ).hover(
  function() {
    $( this ).addClass('uk-open');
  },  
  function() {
    setTimeout(function () {
        $( this ).removeClass('uk-open');
    }, 1000);
  }
);

только по-хорошему надо ещё добавлять переменную-флаг, на случай многократного быстрого наведения/уведения курсора ссылок.

В данном случает, класс вообще не удаляется

keen 29.10.2013 12:46

блин. ну перенеси контекст))
$( ".uk-menu-home" ).hover(
  function() {
    $( this ).addClass('uk-open');
  },  
  function() {
    var that = this;
    setTimeout(function () {
        $( that ).removeClass('uk-open');
    }, 1000);
  }
);

SnakeAce 29.10.2013 12:50

Спасибо, а можно с флагами поподробней?

keen 29.10.2013 12:54

поводи быстро мышкой по ссылкам туда-сюда и посмотри что происходит.
сделай выводы, продумай алгоритм как сделать так, чтобы было нормально, а не как сейчас.
останется самое простое - написать несколько строк кода.

SnakeAce 29.10.2013 13:18

Так, вот у нас есть несколько элементов для проверки.
$( ".uk-menu-home" ).hover(
  function() {
    $( this ).addClass('uk-open').clearTimeout;
  },  
  function() {
    var that = this;
    setTimeout(function () {
        $( that ).removeClass('uk-open');
    }, 1000);
  }
);
     $( ".uk-menu-forum" ).hover(
  function() {
    $( this ).addClass('uk-open').clearTimeout;
  },  
  function() {
    var that = this;
    setTimeout(function () {
        $( that ).removeClass('uk-open');
    }, 1000);
  }
);
     $( ".uk-menu-load" ).hover(
  function() {
    $( this ).addClass('uk-open').clearTimeout;
  },  
  function() {
    var that = this;
    setTimeout(function () {
        $( that ).removeClass('uk-open');
    }, 1000);
  }
);
Т.е нужно задать условие или то, или то?
Получается что-то типо этого
$( ".uk-menu-home").hover(
  function() {
    $( this ).addClass('uk-open').clearTimeout;
  },  
  function() {
    var that = this;
      if($('.uk-menu-forum'||'.uk-menu-load').is(':hover') === true){$( that ).removeClass('uk-open')
    } else {setTimeout(function () {
        $( that ).removeClass('uk-open');
    }, 1000);};
  }
);

SnakeAce 29.10.2013 19:56

Ап. Прошу помочь с данным скриптом. Как его доработать, и возможно сократить?


Часовой пояс GMT +3, время: 05:51.