Clever Geek Handbook

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.

http://jsfiddle.net/TrueBlueAussie/sx8c7uaf/

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>
</div>

Styles:

.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 () {
        $waffle.remove();
    });
});

Why fadeOut

does presence stop working slideUp

?

If you change the script, it's ok:

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


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 () {
    $waffle.remove();
}).animate({opacity:0},{queue:false});


DEMO

+4


source


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 () {
        $waffle.remove();
    });
});

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

+2


source






More articles:


All Articles