Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Помогите прикрутить timeout

Автор: Resets 26.7.2010, 21:49

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

Код


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' );
   });
});

Показывает и скрывает панель навигации. Как реализовать скрытие панели не сразу, а по таймауту? Как на http://www.timeslive.co.za/ (QuickLinks)

Автор: Amphiluke 26.7.2010, 22:27

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

Код


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

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

Автор: ksnk 26.7.2010, 23:49

Код


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);
   });
});

Автор: Resets 27.7.2010, 10:42

Спасибо большое, но не то.
http://tematika.110mb.com/, http://tematika.110mb.com/index1.html, http://tematika.110mb.com/index2.html.

Автор: ksnk 27.7.2010, 10:55

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

Код


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

Автор: Amphiluke 27.7.2010, 15:56

В первом варианте достаточно добавить вызов метода 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();});
   });
});