Проблемы с очередью JQuery

Question

У меня возникли серьезные проблемы, связанные с работой очереди JQuery. Все определенные функции выполняют одновременно, поэтому изменение класса происходит до того, как animation- мы хотим, чтобы исчезать, а затем изменить класс, а затем исчезает снова.

function animatePlusMinus(){ 
    if ($(this).hasClass("ui-icon-minus")) { 
     $(this).queue("goPlus",function(next) { 
       $(this).fadeOut(500); 
       next(); 
      }) 
      .queue("goPlus", function (next) { 
       $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500); 
      }) 
      .dequeue("goPlus"); 

    } else if ($(this).hasClass("ui-icon-plus")) { 
     $(this) 
      .queue("goMinus", function (next) { 
       $(this).fadeOut(500); 
       next(); 
      }) 
      .queue("goMinus", function (next) { 
       $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500); 
      }) 
      .dequeue("goMinus"); 
    } 
} 

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

UPDATE: Here is an JSFiddle

Answer 1

Прямо сейчас, вы звоните next сразу после того, как начал угасанием.

Решение состоит в том, чтобы передать next в качестве обратного вызова для fadeOut:

function animatePlusMinus(){ 
    if ($(this).hasClass("ui-icon-minus")) { 
     $(this).queue("goPlus",function(next) { 
       $(this).fadeOut(500, next); 
      }) 
      .queue("goPlus", function (next) { 
       $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500); 
      }) 
      .dequeue("goPlus"); 

    } else if ($(this).hasClass("ui-icon-plus")) { 
     $(this) 
      .queue("goMinus", function (next) { 
       $(this).fadeOut(500, next); 
      }) 
      .queue("goMinus", function (next) { 
       $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500); 
      }) 
      .dequeue("goMinus"); 
    } 
} 

Но если вы ищете более общее решение, вы, вероятно, лучше погрузиться в promises, а не в очередях. Здесь, с выполнением обещаний jQuery, вы можете сделать

function animatePlusMinus(){ 
    if ($(this).hasClass("ui-icon-minus")) { 
     $(this).fadeOut(500).promise().then(function(){ 
      $(this).removeClass("ui-icon-minus").addClass("ui-icon-plus").fadeIn(500); 
     }); 
    } else if ($(this).hasClass("ui-icon-plus")) { 
     $(this).fadeOut(500).promise().then(function(){ 
      $(this).removeClass("ui-icon-plus").addClass("ui-icon-minus").fadeIn(500);   
     }); 
    } 
}