jQuery: очереди fadeIn () и fadeOut () для разных элементов - PullRequest
Новая
       24

jQuery: очереди fadeIn () и fadeOut () для разных элементов

0 голосов
/ 11 апреля 2011

Я работаю над этим в течение нескольких часов, и я не могу понять, как это сделать - я новичок в jQuery.

Я хочу исчезнуть из одного деления, а затем исчезнутьв другой.Я хочу сделать это по порядку.Я попытался поместить fadeIn () в обратный вызов функции fadeOut () и поставить в очередь две анимации, но они по-прежнему не происходят последовательно.

HTML: 

<article id="foo">
    <div>one set of content, initially set to "display: block;"</div>
    <div id="bar">second set of content, initially set to "display: none;"</div>
    <div id="menu">the menu, which I don't want to fade</div>
</article>

Вотдва метода, которые я пробовал:

Использование queue (): 

$("#foo div:not(#bar, #menu)").queue( function() {
    $(this).fadeOut('slow');
$(this).dequeue();
$("#foo div#bar").fadeIn('slow')    
});

Использование обратного вызова: 

$("#foo div:not(#bar, #menu)").fadeOut('slow', function() {
    $("#foo div#bar").fadeIn('slow');   
});

Это должно быть относительно просто, так как явидел на многих сайтах - что я делаю не так?

Ответы [ 3 ]

2 голосов
/ 11 апреля 2011

Второй метод работает нормально: сначала исчезает сначала div, затем в обратном вызове исчезает другой.

Проверьте мой JSFiddle и убедитесь сами.

Есливаш код не работает, я предлагаю вам проверить ваш код, потому что тот, который вы предоставили, наверняка недействителен :

  1. ваши конечные скобки неверно упорядочены: }) вместоваш )}
  2. ваш второй селектор (для появления) должен быть $("#foo div#bar") в противном случае ничего не появится, потому что у вас нет элемента с class="foo", а скорее id="foo".

Отложив все препятствия, это должно работать: 

$("#foo div:first").fadeOut("slow", function(){
    $("#foo #bar").fadeIn("slow");
});
1 голос
/ 11 апреля 2011

Может быть, повторите ваш второй метод? Это работает для меня. Я запустил это в консоли разработчика здесь на stackoverflow, и оно сработало, как и ожидалось, сначала исчезли теги для этого вопроса, а затем логотип stackoverflow: 

$(".tagged").fadeOut('slow', function () { $("#hlogo").fadeOut('slow'); });
0 голосов
/ 11 апреля 2011 
$("#foo").fadeOut('slow', function () {$("#bar").fadeIn('slow');});

Да, это не правильно для этого HTML, см. Ответ Роба

...