Как связать эти эффекты в JQuery? Очередь? Обещают?

0

У меня эти две несвязанные функции, по крайней мере, нет возможности сделать обратный вызов. Сначала я хочу, чтобы список скользил вверх, ТОГДА другой вниз. Чтобы заставить его работать практически, по крайней мере, как-то, я добавил delay().

Я не могу сделать fsFiddle, так как код слишком сложный, и все <a> имеют href в нем, но вы можете увидеть рабочий пример здесь: http://liebdich.biz/.

Что будет делать здесь работа и как: queue, promise?

$('a').click(function(e){
    e.preventDefault();
    $(this).parent().find('ul').delay(500).slideDown(500);
    $('a').removeClass('bold');
    $(this).addClass('bold');

    if ($(this).is('ul ul a')) {
        return;
    } else {
        $('a').not(this).parent().find('ul').slideUp(500);
    }
 });

Извините, но я не могу создать jsFiddle, так как все <a> в навигации имеют href.

  • 1
    Легко. сделайте slideDown в полном обратном вызове slideUp, таким образом, слайд-шоу не начнется до тех пор, пока slideUp не будет «завершен». Просто имейте в виду, что указанный полный обратный вызов будет запускаться один раз для каждого выбранного вами «a», поэтому может иметь больше смысла использовать .promise().done(fnhere) а не полный обратный вызов, так что это произойдет только один раз.
  • 0
    Извините, но я пробовал это с обратным вызовом, как написала Mayabelle, но это не работает из-за сложности сайта. Смотрите мой отредактированный вопрос по ссылке. Не могли бы вы рассказать .promise() о .promise() ? Спасибо!
Показать ещё 3 комментария
Теги:

3 ответа

1
Лучший ответ

Это было бы подходящим местом для использования объекта обещания, чтобы избежать дублирования обратных вызовов:

$('a').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $('a').removeClass('bold');
    $this.addClass('bold');
    if ($this.is('ul ul a')) {
        $this.parent().find('ul').slideDown(500);
        return;
    } else {        
        $('a').not(this).parent().find('ul').slideUp(500).promise().done(function(){
            $this.parent().find('ul').slideDown(500);
        });
    }
});
Поделиться
  • 0
    Спасибо, вы сделали это !!! :)
  • 0
    Я не мог понять, почему $this.parent().find('ul').slideDown(500); дважды, поэтому я удалил первый, все еще работает !! ;) Я должен понять, что ты сделал сейчас. Хорошо тебе провести время!! : D
Показать ещё 6 комментариев
1

С JQuery часто у вас есть анимация - функция обратного вызова, которая вызывается после завершения анимации. Вот документация slideUp: http://api.jquery.com/slideUp/

Как вы можете видеть, если вы используете два параметра, второй из них касается полной функции, которая вызывается после завершения анимации.

$('a').click(function(e){
    var _link = $(this);
    $('a').not(_link ).parent().find('ul').slideUp(500, function() {
        $(_link).parent().find('ul').delay(500).slideDown(500);
    });
});

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

Поделиться
  • 0
    Спасибо, но, как я уже сказал, здесь нет возможности для обратного вызова. Смотрите мой отредактированный вопрос по ссылке! Спасибо!
  • 0
    Я думаю, что вы можете, вы скользите первым, как только это будет сделано, вы пишете в функцию обратного вызова условие IF, чтобы проверить, нужно ли скользить вторым уровнем.
Показать ещё 1 комментарий
0 
$('a').not(this).parent().find('ul').slideUp(500, function() {
    $(this).parent().find('ul').delay(500).slideDown(500);
});
Поделиться
  • 0
    Извините, я попробовал это, но это дает абсолютный хаос. Как я уже сказал, обратного вызова нет. Вы знаете об очереди или обещании? Смотрите мой отредактированный вопрос по ссылке рабочего примера!
  • 1
    Вы теряете this , вам нужно хранить его во временной переменной.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню