Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Очередность show/hide (https://javascript.ru/forum/jquery/22473-ocherednost-show-hide.html)

dddaaa11 21.10.2011 13:20
Очередность show/hide
 
Всем привет.

Два эффекта выполняются одновременно:
$("#div1").hide();
$("#div2").show();


Подскажите пожалуйста, можно ли сделать так, чтобы сначала выполнялась одна функция (hide) и только после завершения - вторая.

walik 21.10.2011 13:24 
$("#div1").hide(function() {
   $("#div2").show();
});

dddaaa11 21.10.2011 13:28
Спасибо.
А возможно ли без взаимной вложенности это реализовать?

walik 21.10.2011 13:43 
$("#div1").hide(500);
$("#div2").delay(500).show();

В .delay() нужно указать время за которое выполняется первая анимация.

dddaaa11 21.10.2011 13:55
Работает. Но задержка - это по сути имитация очередности.
Дело в том, что я не знаю заранее сколько эффектов будет в цепочке.

Может быть, можно ли сделать что-нибудь, типа

$().animate({}, function(){$("#div1").hide();});
$().animate({}, function(){$("#div2").show();});


ну или выполнить что-то в этом роде... Чтобы эффекты анимации для разных объектов выполнялись друг за другом?

ksa 21.10.2011 14:31
Цитата:
Сообщение от dddaaa11
можно ли сделать что-нибудь, типа
Как вариант вот такого типа... :)

<!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">
</style>
<script type="text/javascript">
$(document).ready(function() {
	var o=$("#test")
	o.queue(function (){
		$(this).hide(500).dequeue();
	});
	o.queue(function (){
		$(this).show(500).dequeue();
	});
});
</script>
</head>
<body>
<div id='test'>Test...</div>
</body>
</html>

walik 21.10.2011 14:50 
$.when($('#div1').hide(), $('#div3').hide(), $('#div4').hide()).done(function() {$('#div2').show()});

ksa 21.10.2011 14:56
walik, автор просил без вложения эффекты вызывать... ;)

И что это за метод when()? :-? Его описания нет в http://jquery-docs.ru/ :(

walik 21.10.2011 15:34
Цитата:
Сообщение от ksa
walik, автор просил без вложения эффекты вызывать...
Здесь нет вложения эффектов) тут вызываются все эффекты и указывается функция которая будет выполнена по окончанию все цепочки эффектов)

Цитата:
Сообщение от ksa
И что это за метод when()? Его описания нет в http://jquery-docs.ru/
http://api.jquery.com/jQuery.when/
Правильней искать в официальной документации :)

ksa 21.10.2011 15:54
Цитата:
Сообщение от walik
Здесь нет вложения эффектов)
Тогда покажи как это будет выглядеть если эффектов будет (нпример) 4...

Цитата:
Сообщение от walik
Правильней искать в официальной документации
Там по аглицки... :(

dddaaa11 21.10.2011 16:02
Спасибо за варианты, все работает )

Видимо время отрисовки эффекта hide не учитывается при обработке.

o.queue(function (){$("#div1").hide('slow');});
o.dequeue();		
o.queue(function (){$("#div2").slideToggle('slow');});
o.dequeue();

даже при таком варианте div2 появляется до того, как полностью исчезает div1

walik 21.10.2011 16:07 
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
  <style>
  div {width: 100px;height: 100px;}
  #div1 {background: red;}
  #div2 {background: yellow;}
  #div3 {background: brown;}
  #div4 {background: green;}
  #div5 {background: blue;display: none;}
  </style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<script>
$.when(
  $('#div1').hide(1200), 
  $('#div2').hide(500), 
  $('#div3').hide(2500), 
  $('#div4').hide(1800)
).done(function() {$('#div5').show(1000)});
</script>
  </body>
</html>

ksa 21.10.2011 16:09
walik, понятно... :yes:

walik 21.10.2011 16:18
Цитата:
Сообщение от dddaaa11
даже при таком варианте div2 появляется до того, как полностью исчезает div1
 
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
  <style>
  div {width: 100px;height: 100px;}
  #div1 {background: red;}
  #div2 {background: blue;display: none;}
  </style>
<div id="div1"></div>
<div id="div2"></div>
<script>
var o=$("#div1")
o.queue(function (){$("#div1").hide('slow');});      
o.queue(function (){$("#div2").slideToggle('slow');});
o.dequeue();

</script>
  </body>
</html>

dddaaa11 21.10.2011 17:03
тему можно закрывать, пасиба :dance:


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