Два вопроса по animate() jQuery
Добрый день. У меня два вопроса по функции animate:
1) Если написать код в таком виде :
$(this).css({display:'block'}).animate({opacity:'1'}, 1000).delay(2000).animate({opacity:'0'}, 1000).css({display:'none'});
то он не исполнится, такое впечатление, что из-за того, что в одном стеке используются противоречащие друг-другу методы css : display:'block', display:'none'. Переделываю таким образом :
$(this).css({display:'block'}).animate({opacity:'1'}, 1000).delay(2000).animate({opacity:'0'}, 1000,
function()
{
$(this).css({display:'none'});
});
и все начинает работать.. Но все таки вопрос в том, почему в первом исполнении код не работает ?2)Второй вопрос такого содержания. Написал скрипт, в котором есть кнопка и див (изначально невидимый и прозрачный).. При клике на кнопку, див путем того же animate (приблизительно такой же код как в первом вопросе) сначала становится непрозрачным-видимым, далее висит в таком положении 2 сек.. и далее делается прозрачным.. При клике по самому диву (когда он находится в видимом состоянии) он должен принимать первоначальный вид (прозрачным-невидимым) Код :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Help</title>
<style>
div{
display:none;
position:absolute;
top:50px;
left:10px;
width:200px;
height:200px;
background:#ccf;
opacity:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function()
{
$('button').click(function()
{
$("div").css({display:'block'}).animate({opacity:'1'}, 1000).delay(2000).animate({opacity:'0'}, 1000,
function()
{
$(this).css({display:'none'});
});
})
$('div').click(function()
{
$(this).css({display:'none', opacity:'0'}).clearQueue();
});
});
</script>
</head>
<body>
<div></div>
<button>Показать</button>
</body>
</html>
Если кликать по кнопке изрядно часто, то нарушается очередность выполнения применяемых методов к диву.. (начинает моргать). Хотя вроде применяю "clearQueue" для очистки очереди стека функций. Помогите пожалуйста разобраться, как правильно сделать так, чтобы отрабатывало верно при любом кликанье по элементам. Заранее благодарен за ответ. |
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div{
display:none;
position:absolute;
top:50px;
left:10px;
width:200px;
height:200px;
background:#ccf;
opacity:0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$("div").css({display:'block'}).animate({opacity:'1'}, 1000).delay(2000).animate(
{opacity:'0'}, 1000,
function(){
$(this).css({display:'none'});
});
})
$('div').click(function(){
$(this).clearQueue().css({display:'none', opacity:'0'});
});
});
</script>
</head>
<body>
<html>
<body>
<div></div>
<button>Показать</button>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
.css({color:'red'});
и посмотри что будет... И это не из-за того, что Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div{
display:none;
position:absolute;
top:50px;
left:10px;
width:200px;
height:200px;
background:#ccf;
opacity:0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$("div").css({display:'block', opacity:'0'}).animate({opacity:'1'}, 1000).delay(2000).animate(
{opacity:'0'}, 1000,
function(){
$(this).css({display:'none'});
});
})
$('div').click(function(){
$(this).clearQueue().css({display:'none', opacity:'0'});
});
});
</script>
</head>
<body>
<html>
<body>
<div></div>
<button>Показать</button>
</body>
</html>
|
Цитата:
.css({display:'none'});
то снова не работает .. |
Цитата:
|
Цитата:
|
Цитата:
$("div").css({display:'block', opacity:'0'}).animate({opacity:'1'}, 500).delay(2000).animate({opacity:'0'}, 500).css({background:'red'});
фунции animate отрабатывают по-очереди, функции css вырываются из этой очередности - исполняются сразу. Т.е. css({background:'red'}), находящийся в самом конце, исполняется сразу после css({display:'block', opacity:'0'}). Вроде читал, что не должно быть так :( .. Проясните ситуацию ?.. |
Цитата:
чтобы добавить функцию в очередь, нужно (очевидно) её добавить в очередь.
$(this).
css({display:'block'}).
animate({opacity:'1'}, 1000).
delay(2000).
animate({opacity:'0'}, 1000).
queue(function () {
$(this).css({display:'none'});
});
(код не тестил, есть сомнения по поводу this в callback'е) |
| Часовой пояс GMT +3, время: 02:32. |