Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2013, 20:11
Аспирант
Отправить личное сообщение для Neznayka Посмотреть профиль Найти все сообщения от Neznayka
 
Регистрация: 08.03.2013
Сообщений: 37

Два вопроса по 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" для очистки очереди стека функций. Помогите пожалуйста разобраться, как правильно сделать так, чтобы отрабатывало верно при любом кликанье по элементам. Заранее благодарен за ответ.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2013, 09:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Neznayka
почему в первом исполнении код не работает ?
С чего ты взял что он не работает? Есть сообщение об ошибке?
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2013, 09:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Neznayka
Если кликать по кнопке изрядно часто, то нарушается очередность выполнения применяемых методов к диву.. (начинает моргать).
Мой вариант в Опере не моргает...

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2013, 12:31
Аспирант
Отправить личное сообщение для Neznayka Посмотреть профиль Найти все сообщения от Neznayka
 
Регистрация: 08.03.2013
Сообщений: 37

Сообщение от ksa Посмотреть сообщение
С чего ты взял что он не работает? Есть сообщение об ошибке?
Сообщения об ошибке нет, просто ничего не происходит, игнорирует исполнение всего стека
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2013, 12:34
Аспирант
Отправить личное сообщение для Neznayka Посмотреть профиль Найти все сообщения от Neznayka
 
Регистрация: 08.03.2013
Сообщений: 37

Сообщение от ksa Посмотреть сообщение
Мой вариант в Опере не моргает...
Моргает )).. Попробуйте нажать сначала на кнопку, когда появится див - по самому диву (он исчезнет) и тут-же опять по кнопке... В этом случае див появится, но уже не будет висеть 2000, а буквально тут же начнет исчезать.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2013, 14:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Neznayka
просто ничего не происходит, игнорирует исполнение всего стека
Поставь вместо последнего
Сообщение от Neznayka
.css({display:'none'});
Например
.css({color:'red'});

и посмотри что будет...
И это не из-за того, что
Сообщение от Neznayka
такое впечатление, что из-за того, что в одном стеке используются противоречащие друг-другу методы css : display:'block', display:'none'
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2013, 14:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Neznayka
Попробуйте нажать сначала на кнопку, когда появится див - по самому диву (он исчезнет) и тут-же опять по кнопке... В этом случае див появится, но уже не будет висеть 2000, а буквально тут же начнет исчезать.
А так?

<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 14.05.2013, 17:22
Аспирант
Отправить личное сообщение для Neznayka Посмотреть профиль Найти все сообщения от Neznayka
 
Регистрация: 08.03.2013
Сообщений: 37

Сообщение от ksa Посмотреть сообщение
Поставь вместо последнего
Например
.css({color:'red'});

и посмотри что будет...
Поставил, работает, но если меняю назад на
.css({display:'none'});

то снова не работает ..
Ответить с цитированием
  #9 (permalink)  
Старый 14.05.2013, 17:24
Аспирант
Отправить личное сообщение для Neznayka Посмотреть профиль Найти все сообщения от Neznayka
 
Регистрация: 08.03.2013
Сообщений: 37

Сообщение от ksa Посмотреть сообщение
А так?
Неа, ничего не изменилось. Так же стек функций сбивается.
Ответить с цитированием
  #10 (permalink)  
Старый 14.05.2013, 20:22
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Neznayka
Поставил, работает, но если меняю назад на
Поставь background: red , для наглядности.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Работа] Два модальных окна на JQuery VictorM Работа 3 14.08.2012 23:09
Проблема с Confirm, jQuery animate в Chrome dimonrus66 jQuery 4 08.10.2011 16:54
Два вопроса по jQuery logon71 jQuery 4 27.07.2011 16:28
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 12:33
Два вопроса по XMLHTTPRequest Pluto Общие вопросы Javascript 7 22.09.2010 22:43