VPF::Помогите прикрутить timeout - Форум программистов

Resets

Дата 26.7.2010, 21:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 18.3.2007

Репутация: нет
Всего: нет

Помогите пожалуйста.
Есть код:

Код


jQuery( function() {
   jQuery( '#perehod' ).hover(
   function() {
      jQuery( this ).addClass( 'on' ).children( '#perehod-link' ).addClass( 'on2' );
   },
   function() {
      jQuery( this ).removeClass( 'on' ).children( '#perehod-link' ).removeClass( 'on2' );
   });
});

Показывает и скрывает панель навигации. Как реализовать скрытие панели не сразу, а по таймауту? Как на этом сайте (QuickLinks)

Amphiluke

Дата 26.7.2010, 22:27 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Что-то типа этого, наверное.

Код


jQuery( function() {
   jQuery( '#perehod' ).hover(
   function() {
      jQuery( this ).addClass( 'on' ).children( '#perehod-link' ).addClass( 'on2' );
   },
   function() {
      jQuery( this ).delay(300).queue(function() {jQuery(this).removeClass('on').children('#perehod-link').removeClass('on2'); jQuery( this ).dequeue();});
   });
});

Либо цепляйте обычный setTimeout.

Resets

Дата 26.7.2010, 22:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 18.3.2007

Репутация: нет
Всего: нет

Amphiluke, Спасибо. Таким способом отсчёт начинает когда курсор убран и не останавливается когда курсор наводится снова, а мне нужно нужно, чтобы при повторном наведении время не заканчивалось и меню не закрывалось.

ksnk

Дата 26.7.2010, 23:49 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


jQuery( function() {

   var Timeout = false;

   function perehod(on){
        var x= on?'addClass':'removeClass' ;     // исправлено!
        jQuery( '#perehod' )[x]( 'on' ).children( '#perehod-link' )[x]( 'on2' );
  }

   jQuery( '#perehod' ).hover(
   function() {
      if(Timeout) {
           clearTimeout(Timeout);Timeout=false; 
      } else 
           perehod(true);
   },
   function() {
      Timeout = setTimeout(function(){Timeout=false;perehod(false)},3000);
   });
});

Это сообщение отредактировал(а) ksnk - 27.7.2010, 10:55

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Resets

Дата 27.7.2010, 10:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 18.3.2007

Репутация: нет
Всего: нет

Спасибо большое, но не то.
Как есть, по первому варианту, по второму варианту.

ksnk

Дата 27.7.2010, 10:55 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

в моем случае нужно в 6 строке поменять местами классы на

Код


        var x= on?'addClass':'removeClass' ;

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Amphiluke

Дата 27.7.2010, 15:56 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

В первом варианте достаточно добавить вызов метода dequeue()

Код


jQuery( function() {
   jQuery( '#perehod' ).hover(
   function() {
      jQuery( this ).dequeue();
      jQuery( this ).addClass( 'on' ).children( '#perehod-link' ).addClass( 'on2' );
   },
   function() {
      jQuery( this ).delay(300).queue(function() {jQuery(this).removeClass('on').children('#perehod-link').removeClass('on2'); jQuery( this ).dequeue();});
   });
});

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »