Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не получается setTimeout (https://javascript.ru/forum/dom-window/29913-ne-poluchaetsya-settimeout.html)

deputat333 16.07.2012 21:25
Не получается setTimeout
 
Прошу помощи со следующей задачей. Есть горизонтальное меню. Я не хочу чтобы при случайном попадании курсора в область кнопки (либо меню в целом) появлялся дочерний элемент элемент с display:none. Появление элемента реализовано через fadeIn, исчезание fadeOut.
Как сделать таймаут с jquery, чтобы fadeIn и fadeOut срабатывали только если курсор ПРОБУДЕТ заданное время в области кнопки или вне области дочернего элемента соответственно?
Вот код:
$(document).ready(function(){
	$("#mmenu1").mouseenter(function(){
		$("#droptab1").fadeIn(150);
		$("#fon").fadeIn(10);
	}).mouseleave(function(){
		$("#droptab1").fadeOut(150);
		$("#fon").fadeOut(10);
		
	})
});

Deff 16.07.2012 21:41 
$(document).ready(function(){
var MinTime=1000;

function TimeShoWYes () {
          if(!$("#mmenu1").hasClass('Active')){
           $("#mmenu1").addClass('Active')
	$("#droptab1").fadeIn(150);
	$("#fon").fadeIn(10);
}}
function TimeHideYes () {
           if($("#mmenu1").hasClass('Active')){
           $("#mmenu1").removeClass('Active')
	$("#droptab1").fadeOut(150);
	$("#fon").fadeOut(10);
}}


         $("#mmenu1").mouseenter(function(){
           setTimeout(function() {TimeShoWYes()},MinTime)

	}).mouseleave(function(){
           setTimeout(function() {TimeHideYes()},MinTime)
	})
});

deputat333 16.07.2012 21:49
Спасибо огромное!

Deff 16.07.2012 22:21
Поправил

deputat333 24.07.2012 01:02
Попутный вопрос - я решил всю функцию запихнуть в одну, т.к. вкладок меню 7 шт.
Но тут проблема с таймаутом - он один и тот же для всех.
Есть какое-то решение этого вопроса или 7 раз прописывать?
Пробовал создавать массив и в качестве параметров передавать цыфры - не работает.
function menuFirstLast(TimerId_01,TimerId_02,droptab,mmenu_fon,mmenu_fon_r,mmenu_fon_l,mmenu){
	var timer=[];
	$(mmenu).mouseenter({
		clearTimeout(timer[TimerId_02]);
		timer[TimerId_01]=setTimeout({
			$(droptab).fadeIn(300);
			$(mmenu_fon).fadeIn(100);
			$(mmenu_fon_r).fadeIn(100);
			$(mmenu_fon_l).fadeIn(100);
		},300)
	}).mouseleave({
		clearTimeout(timer[TimerId_01]);
		timer[TimerId_02]=setTimeout({
			$(droptab).fadeOut(100);
			$(mmenu_fon).fadeOut(100);
			$(mmenu_fon_r).fadeOut(100);
			$(mmenu_fon_l).fadeOut(100);
		},300)
	})
};

Deff 24.07.2012 01:25
deputat333,
При установке Генерить число

var Num_TimerID=[];//Глобальные

Num_TimerID.push(  setTimeout( BB () }  )

function  BB () {
        // Тут что-то;          
}

 $(mmenu).mouseenter({
     for (i=0; i<Num_TimerID.length; i++){
        clearTimeout(Num_TimerID[i]);
     }
//

========================
А в принципе и массив не нужен - достаточно одного TimerId - на все действия
Если запускается иной - все остальные TimerId уже смысла не имеют и должны стираться - занчит одного - за глаза!

deputat333 24.07.2012 14:08
Не могу разобраться с кодом. Можешь побольше комментариев дописать что куда?

Deff 24.07.2012 14:18
deputat333,
Так - пойдёт ?
var timer=[]; //
function menuFirstLast(TimerId_01,TimerId_02,droptab,mmenu_fon,mmenu_fon_r,mmenu_fon_l,mmenu){
	$(mmenu).mouseenter({
		clearTimeout(timer[TimerId_02]);
		timer[TimerId_01]=setTimeout({
			$(droptab).fadeIn(300);
			$(mmenu_fon).fadeIn(100);
			$(mmenu_fon_r).fadeIn(100);
			$(mmenu_fon_l).fadeIn(100);
		},300)
	}).mouseleave({
		clearTimeout(timer[TimerId_01]);
		timer[TimerId_02]=setTimeout({
			$(droptab).fadeOut(100);
			$(mmenu_fon).fadeOut(100);
			$(mmenu_fon_r).fadeOut(100);
			$(mmenu_fon_l).fadeOut(100);
		},300)
	})
};

deputat333 24.07.2012 23:13
Вложений: 1
В том то и дело, что вот так
var timer=[];
function menuFirstLast(TimerId_01,TimerId_02,droptab,mmenu_fon,mmenu_fon_r,mmenu_fon_l,mmenu){
	$(mmenu).mouseenter({
		clearTimeout(timer[TimerId_02]);
		timer[TimerId_01]=setTimeout({
			$(droptab).fadeIn(300);
			$(mmenu_fon).fadeIn(100);
			$(mmenu_fon_r).fadeIn(100);
			$(mmenu_fon_l).fadeIn(100);
		},300)
	}).mouseleave({
		clearTimeout(timer[TimerId_01]);
		timer[TimerId_02]=setTimeout({
			$(droptab).fadeOut(100);
			$(mmenu_fon).fadeOut(100);
			$(mmenu_fon_r).fadeOut(100);
			$(mmenu_fon_l).fadeOut(100);
		},300)
	})
};
$(document).ready(function(){
	menuFirstLast(1,2,'#droptab1','#mmenu1_fon','#mmenu1_fon_r','#mmenu1_fon_l','#mmenu1');
});

не работает. Вот что пишет firebug:

Deff 24.07.2012 23:19
deputat333,
Поставьте alertы
var timer=[];
function menuFirstLast(TimerId_01,TimerId_02,droptab,mmenu_fon,mmenu_fon_r,mmenu_fon_l,mmenu){
	$(mmenu).mouseenter({
		alert(typeof(TimerId_02)+'='+TimerId_02)
		clearTimeout(timer[TimerId_02]);
		timer[TimerId_01]=setTimeout({
			$(droptab).fadeIn(300);
			$(mmenu_fon).fadeIn(100);
			$(mmenu_fon_r).fadeIn(100);
			$(mmenu_fon_l).fadeIn(100);
		},300)
	}).mouseleave({
		alert(typeof(TimerId_01)+'='+TimerId_01)
		clearTimeout(timer[TimerId_01]);
		timer[TimerId_02]=setTimeout({
			$(droptab).fadeOut(100);
			$(mmenu_fon).fadeOut(100);
			$(mmenu_fon_r).fadeOut(100);
			$(mmenu_fon_l).fadeOut(100);
		},300)
	})
};
$(document).ready(function(){
	menuFirstLast(1,2,'#droptab1','#mmenu1_fon','#mmenu1_fon_r','#mmenu1_fon_l','#mmenu1');
});

deputat333 24.07.2012 23:42
Вложений: 1
К сожалению не сработало... Алерты не выбили, вот что пишет:

Deff 24.07.2012 23:46
deputat333,
У Вас походу значение TimerId_02 и TimerId_01 - не цифровое - либо не задаётся в скрипте - вы должны его передавать в качестве цифры при вызове функции
И вообще очередной топик - секс по телефону - выложите ссылку на тестовую страницу или воткните в топик полный контент с HTML

deputat333 24.07.2012 23:51
Сейчас сделаю умножение

deputat333 25.07.2012 00:08
Вложений: 1
Не помогло. Вот полный код компонента. Прошу помощи.

Deff 25.07.2012 02:18
deputat333,
Весь Ваш скрипт:
$(document).ready(function(){
var MinTime=300;
var timerID=[];

function TimeShoWYes (ID) {
    $("#"+ID+" > div[id^='droptab']").fadeIn(300);
    $("#"+ID+" > div[id^='mmenu']").fadeIn(100);
}
function TimeHideYes (ID) {
    $("#"+ID+" > div").fadeOut(100);
}
 
    $("#menu_main > div[id^='mmenu']").mouseenter(function(){
	 var ID = $(this).attr("id");
         var indeX = $("#menu_main > div[id^='mmenu']").index(this);
         clearTimeout(timerID[2*indeX+1]);
         timerID[2*indeX]=setTimeout(function() {TimeShoWYes(ID)},MinTime)
 
    }).mouseleave(function(){
	 var ID = $(this).attr("id");
         var indeX = $("#menu_main > div[id^='mmenu']").index(this);
         clearTimeout(timerID[2*indeX])
         timerID[2*indeX+1]=setTimeout(function() {TimeHideYes(ID)},MinTime)

    })
});

На будущее (Не ставьте нумерацию в середину id или класса
2. id - достаточно на один родительский блок элемента, с которым работаем, остальные потомки-селекторы лучше делать классами без нумераций

Deff 25.07.2012 02:46
С такой поправкой - забавней смотриться:
<style type="text/css">
div[id^="droptab"]{
 top: 187px!important;
 margin-top: -130px!important;
}
</style>
<script>
$(document).ready(function(){
var MinTime=300;
var timerID=[];

function TimeShoWYes (ID) {
    $("#"+ID+" > div[id^='droptab']").slideDown(600);
    $("#"+ID+" > div[id^='mmenu']").fadeIn(100);
}
function TimeHideYes (ID) {
    $("#"+ID+" > div").fadeOut(100);
}
 
    $("#menu_main > div[id^='mmenu']").mouseenter(function(){
	 var ID = $(this).attr("id");
         var indeX = $("#menu_main > div[id^='mmenu']").index(this);
         clearTimeout(timerID[2*indeX+1]);
         timerID[2*indeX]=setTimeout(function() {TimeShoWYes(ID)},MinTime)
 
    }).mouseleave(function(){
	 var ID = $(this).attr("id");
         var indeX = $("#menu_main > div[id^='mmenu']").index(this);
         clearTimeout(timerID[2*indeX])
         timerID[2*indeX+1]=setTimeout(function() {TimeHideYes(ID)},MinTime)

    })
});
</script>


http://hostjs-mybb2011.narod.ru/deputat.html

deputat333 25.07.2012 12:42
Мастер-класс от Deff'а)
Спасибо Вам огромное!
Заработаю денег приеду к вам на стажировку)


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