Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jQuery] проблема с анимацией/очередью / 5 сообщений из 5, страница 1 из 1
12.06.2012, 18:06:51
    #37835456
eliotik
eliotik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[jQuery] проблема с анимацией/очередью
Всем привет,

Есть следующая проблема. На странице 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, 19:10:10
    #37835510
eliotik
eliotik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[jQuery] проблема с анимацией/очередью
C animate будет такой же эффект http://jsfiddle.net/mwyCm/
но если задействовать коллбек в анимэйт то отработает нормально http://jsfiddle.net/c2HpD/
но к сожалению мне не подходит использование коллбеков.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.06.2012, 23:50:38
    #37835660
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[jQuery] проблема с анимацией/очередью
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
| Ответить | Цитировать | Написать  
13.06.2012, 11:27:20
    #37836039
eliotik
eliotik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[jQuery] проблема с анимацией/очередью
Паганель
Код: 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:55:55
    #37836109
Паганель
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[jQuery] проблема с анимацией/очередью
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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jQuery] проблема с анимацией/очередью / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 412ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449704]:
 0ms
get settings:
 9ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 68ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 242ms
total:  412ms
x
x
Закрыть


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