Why does the parallel fadeOut () function stop slideshow () from running?

I put together this simple demo to see why it slideUp

didn't work when items were clicked and noticed that if I delete fadeOut

it works.


Simple HTML:

<div class="WaffleMaker">
    <div class="Waffle">I am a waffle (toaster notification 1)</div>
    <div class="Waffle">I am a waffle (toaster notification 2)</div>
    <div class="Waffle">I am a waffle (toaster notification 3)</div>



.WaffleMaker {
    position: absolute;
    min-width: 200px;
    bottom: 0;
    left: 0;
    right: 0;
.Waffle {
    position: relative;
    height: 80px;
    background-color: #12a6db;


Test code:

$('.Waffle').click(function () {
    var $waffle = $(this);
    $waffle.fadeOut().slideUp("slow", function () {


Why fadeOut

does presence stop working slideUp


If you change the script, it's ok:

    $waffle.slideUp("slow", function () {



source to share

2 answers

This is because functions are queued, you can use .animate

and set the queue to false

$waffle.slideUp("slow", function () {





By default the a-sync functions are executed by default and run when another is finished. When combining animations, I suggest using animate()


Animation example

Example 1.

$('.Waffle').click(function () {
    var $waffle = $(this);
    $($waffle).animate({ height: 0, opacity: 0 }, 'slow');



If you don't want to work with animation, you can disable the queue.

Fiddle: http://jsfiddle.net/sx8c7uaf/3/

Disable sample queue

Example 2

$('.Waffle').click(function () {
    var $waffle = $(this);
    $waffle.fadeOut({queue: false}).slideUp("slow", function () {


Fiddle: http://jsfiddle.net/sx8c7uaf/4/



All Articles