Задержка перед выполнением части скрипта
Здравствуйте! Не могу понять, каким образом можно сделать так, чтобы часть скрипта запускалась с задержкой в 1 секунду. :help: 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>
|
gemma,
setTimeout |
я пробую, но что-то не получается. :-? Не могли бы Вы, пожалуйста, написать как установить setTimeout в данном случае
|
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>
|
спасибо огромное! Подскажите на будущее, как изменить код, если я буду использовать версию 1.7 и выше
|
gemma,
поставьте выше замену и поменяйте название в строке 54 http://javascript.ru/forum/jquery/40...tml#post263492 |
| Часовой пояс GMT +3, время: 11:16. |