Форум

gemma · #1 (**permalink**) 28.06.2014, 21:44

Здравствуйте! Не могу понять, каким образом можно сделать так, чтобы часть скрипта запускалась с задержкой в 1 секунду.

delay не срабатывает.

Есть два div: div.shareinscr (дитя) и div.bottompanel (родитель). Таковых дивов в документе большое количество. Пользователь нажимает на div.shareinscr первый раз, к этому диву прибавляется класс siactive, к div.bottompanel добавляется класс bpactive; пользователь нажимает на .shareinscr второй раз, у этого дива отнимается класс siactive мгновенно, у div.bottompanel должен отниматься класс bpactive через одну секунду. Посмотреть пример: http://learn.javascript.ru/play/BJcUgb
Я попробовал составить скрипт на jQuery. Вроде бы все работает, но, т.к. только начал изучать скрипты, не знаю как создать задержку в одну секунду перед выполнением строчки $(this).parent(".bottompanel").removeClass("bpacti ve");

<script type="text/javascript">	
	$(document).ready(function(){
		$('.shareinscr').toggle(
			function(e){
				$(this).addClass("siactive");
				$(this).parent(".bottompanel").addClass("bpactive");
			},
			function(e){
				$(this).removeClass("siactive");
				$(this).parent(".bottompanel").removeClass("bpactive");
			}
		);
	});
</script>

рони · #2 (**permalink**) 28.06.2014, 22:50

gemma,
setTimeout

gemma · #3 (**permalink**) 29.06.2014, 12:52

я пробую, но что-то не получается.

Не могли бы Вы, пожалуйста, написать как установить setTimeout в данном случае

рони · #4 (**permalink**) 29.06.2014, 13:04

gemma, на всякий случай c версии 1.7 toggle это совсем иная функция

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<style type="text/css">
.container {
	width:200px;
	height:300px;
	overflow:hidden;
	position:relative;
	background:#003;
	float:left;
	margin:10px;
}

.container:hover .bottompanel {
	bottom:0;
}

.bottompanel {
	width:200px;
	height:25px;
	background:rgba(255, 255, 255, 0.7);
	font-weight:bold;
	font-size:9px;
	text-align:center;
	position:absolute;
	bottom:-25px;
	padding:0;
}

.bpactive {
	bottom:0;
}

.shareinscr{
	color:black;
	display:inline-block;
	padding:7px;
	margin:0 5px;
	cursor:default;
	font-family:Arial, Helvetica, sans-serif;
}

.siactive {
	color: #900;
}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$('.shareinscr').toggle(
			function(e){
				$(this).addClass("siactive");
				$(this).parent(".bottompanel").addClass("bpactive");
			},
			function(e){
			    var el = $(this);
				el.removeClass("siactive");
                window.setTimeout(function ()
{
   el.parent(".bottompanel").removeClass("bpactive")
}, 1000)
				;
			}
		);
	});
</script>
</head>
<body>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
</body>
</html>

gemma · #5 (**permalink**) 29.06.2014, 13:11

спасибо огромное! Подскажите на будущее, как изменить код, если я буду использовать версию 1.7 и выше

рони · #6 (**permalink**) 29.06.2014, 13:44

gemma,
поставьте выше замену и поменяйте название в строке 54
неразбериха с toggle

Форум

Справочник

Discord чат

Курсы javascript