ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jQuery] проблема с анимацией/очередью
5 сообщений из 5, страница 1 из 1
[jQuery] проблема с анимацией/очередью
    #37835456
eliotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
eliotik
Гость
Всем привет,

Есть следующая проблема. На странице 31 <div>, изначально они скрыты (display: none).
Запускается функция отображения дивов, функция генерит строки селекторов, для отображения дивов. Выглядит это так
Код: javascript
1.
2.
3.
4.
5.
6.
7.
$('div[cellid="1"][playable="1"]','#divs').delay(200)['fadeIn'](2000);

$('div[cellid="2"][playable="1"],div[cellid="3"][playable="1"],div[cellid="4"][playable="1"],div[cellid="5"][playable="1"],div[cellid="6"][playable="1"],div[cellid="7"][playable="1"]','#divs').delay(200)['fadeIn'](2500);

$('div[cellid="8"][playable="1"],div[cellid="9"][playable="1"],div[cellid="10"][playable="1"],div[cellid="11"][playable="1"],div[cellid="12"][playable="1"],div[cellid="13"][playable="1"],div[cellid="14"][playable="1"],div[cellid="15"][playable="1"],div[cellid="16"][playable="1"],div[cellid="17"][playable="1"],div[cellid="18"][playable="1"],div[cellid="19"][playable="1"]','#divs').delay(200)['fadeIn'](3000);

$('div[cellid="20"][playable="1"],div[cellid="21"][playable="1"],div[cellid="22"][playable="1"],div[cellid="23"][playable="1"],div[cellid="24"][playable="1"],div[cellid="25"][playable="1"],div[cellid="26"][playable="1"],div[cellid="27"][playable="1"],div[cellid="28"][playable="1"],div[cellid="29"][playable="1"],div[cellid="30"][playable="1"],div[cellid="31"][playable="1"]','#divs').delay(200)['fadeIn'](3500);



эффект отображения взят в [] потому как он может быть разным. Перед тем как отобразить дивы выбранные указанным селектором, делается задержка, после этого происходит отображение заданным эффектом.

После отображения дергается функция которая прячет эти дивы. Функция так же генерит селекторы.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
$('div[cellid="5"][playable="1"],div[cellid="31"][playable="1"]','#divs').delay(200).fadeOut(500);

$('div[cellid="12"][playable="1"],div[cellid="30"][playable="1"],div[cellid="25"][playable="1"]','#divs').delay(200).fadeOut(550);

$('div[cellid="13"][playable="1"],div[cellid="26"][playable="1"],div[cellid="4"][playable="1"],div[cellid="17"][playable="1"],div[cellid="16"][playable="1"]','#divs').delay(200).fadeOut(600);

$('div[cellid="3"][playable="1"],div[cellid="20"][playable="1"],div[cellid="7"][playable="1"],div[cellid="15"][playable="1"]','#divs').delay(200).fadeOut(650);

$('div[cellid="21"][playable="1"],div[cellid="24"][playable="1"],div[cellid="6"][playable="1"],div[cellid="29"][playable="1"],div[cellid="10"][playable="1"]','#divs').delay(200).fadeOut(700);

$('div[cellid="9"][playable="1"]','#divs').delay(200).fadeOut(750);

$('div[cellid="14"][playable="1"]','#divs').delay(200).fadeOut(800);

$('div[cellid="1"][playable="1"],div[cellid="28"][playable="1"],div[cellid="18"][playable="1"],div[cellid="23"][playable="1"]','#divs').delay(200).fadeOut(850);

$('div[cellid="8"][playable="1"],div[cellid="19"][playable="1"],div[cellid="2"][playable="1"]','#divs').delay(200).fadeOut(900);

$('div[cellid="27"][playable="1"],div[cellid="11"][playable="1"],div[cellid="22"][playable="1"],div[cellid="undefined"][playable="1"]','#divs').delay(200).fadeOut(950);



Эффект для скрытия дивов используется один и тот же в отличии от функции отображения.
Как видно из кода выше, код отображения и код скрытия разный в итоге. Но на деле происходит следующее:
- Дивы отобразились,
- Дивы скрылись, и порядок выполнения скрытия дивов был как порядок их отображения, но наоборот. Т.е. к примеру отображение происходило по следующей очереди индексов дивов: 1,3,5,2,6,8,4,9,7,10 , а скрытие произошло наоборот 10,7,9,4,8,6,2,5,3,1 , хотя должно было произойти по другой очереди, к примеру 5,1,6,2,4,3,8,9,7,10 .

Такое ощущение, что в jQuery после анимации элементы остаются висеть в его очереди, и когда поступает команда на анимацию элемента, жквери анимирует эту очередь с конца.

Как можно было бы достичь желаемого эффекта, т.е. чтобы нормально отрабатывал код скрытия элементов после того как был применен эффект появления дивов?

Пример как оно отрабатывает: http://jsfiddle.net/nMp3c/4/
А вот как оно должно отрабатывать если дивы были видны и к ним не была применена jquery анимация: http://jsfiddle.net/8EcEt/1/
...
Рейтинг: 0 / 0
12.06.2012, 18:06:51
| Ответить | Цитировать | Написать  
[jQuery] проблема с анимацией/очередью
    #37835510
eliotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
eliotik
Гость
C animate будет такой же эффект http://jsfiddle.net/mwyCm/
но если задействовать коллбек в анимэйт то отработает нормально http://jsfiddle.net/c2HpD/
но к сожалению мне не подходит использование коллбеков.
...
Рейтинг: 0 / 0
12.06.2012, 19:10:10
| Ответить | Цитировать | Написать  
[jQuery] проблема с анимацией/очередью
    #37835660
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
eliotikТакое ощущение, что в jQuery после анимации элементы остаются висеть в его очереди, и когда поступает команда на анимацию элемента, жквери анимирует эту очередь с конца.а давайте туда заглянем
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
function hide(){
    
    $('div[cellid="2"][playable="1"]','#divs').delay(200).animate({
        opacity: 0
      }, 1000);
    
console.log($('div[cellid="2"][playable="1"]','#divs').queue());  
console.log($('div[cellid="1"][playable="1"]','#divs').queue());
    
    $('div[cellid="1"][playable="1"]','#divs').delay(300).animate({
        opacity: 0
      }, 1200);    
    $('div[cellid="3"][playable="1"]','#divs').delay(400).animate({
        opacity: 0
      }, 1300);
}

Код: javascript
1.
2.
["inprogress", g(), function(), g()]
["inprogress", g()]

у каждого дива своя очередь
...
Рейтинг: 0 / 0
12.06.2012, 23:50:38
| Ответить | Цитировать | Написать  
[jQuery] проблема с анимацией/очередью
    #37836039
eliotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
eliotik
Гость
Паганель
Код: javascript
1.
2.
console.log($('div[cellid="2"][playable="1"]','#divs').queue());  
console.log($('div[cellid="1"][playable="1"]','#divs').queue());


Код: javascript
1.
2.
["inprogress", g(), function(), g()]
["inprogress", g()]


у каждого дива своя очередь

т.е. после шоу для каждого дива почистить очередь?
пробовал сделать чтото типа такого:
Код: javascript
1.
2.
3.
4.
$.when( $('div[cellid="1"][playable="1"]','#divs').delay(200)['fadeIn'](2000) )
.then( function(){
  $('div[cellid="1"][playable="1"]','#divs').clearQueue(); //пробовал и .stop();
} );


но когда дело доходит до хайда, то ничего не происходит. очередь у дива перед анимацией хайда пустая, но фейдаут не выполняется.
...
Рейтинг: 0 / 0
13.06.2012, 11:27:20
| Ответить | Цитировать | Написать  
[jQuery] проблема с анимацией/очередью
    #37836109
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
eliotikт.е. после шоу для каждого дива почистить очередь?да нет
я бы создал свою очередь и пихал туда все действия
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
$(function() {
    var $myQueueObject = $({});
   
    $myQueueObject
        .queue(function (next) {
            console.log('1');
            next();
        })
        .delay(3000)
        .queue(function (next) {
            console.log('2');
            next();
        });
});

но это я мало еще работал с анимацией (как-то редко надобится)
поищите все-таки еще в инете, может, есть более правильные подходы для решения этой проблемы...
...
Рейтинг: 0 / 0
13.06.2012, 11:55:55
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jQuery] проблема с анимацией/очередью
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=165&tid=1449704]:
 0ms
get settings:
 4ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 54ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 22ms
get tp. blocked users:
 1ms
others: 197ms
total:  299ms
созд. / загр.: 299ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]