jQuery slide and fade out with delay doesnt work

Question

I am writing a notification plugin for jQuery. As part of the plugin the notifications can be set to auto disappear after a certain time. For some reason though it only fades out and doesnt slideUp as I'd expect it to. What am I doing wrong?

$('#' + plugin.uniqID)
    .delay(plugin.settings['autoclose'])
    .queue(function () {
        $(this)
            .fadeOut({ duration: plugin.settings['speed'], queue: false })
            .slideUp(plugin.settings['speed']);
        });

What if you swap the animation functions? Stupid suggestion but I'm not very experienced with JQuery animations, I usually just use the `animate` function with a CSS map. — MarioDS, Nov 02 '12 at 16:16
Interestingly, if I re-order the same occurs. Also if I remove the fade completely the `slideUp` never works - now im really confused! — Chris, Nov 02 '12 at 16:19
have you tried adding a `.delay()` after the `.fadeout()` and before the `.slideup()`? — Sablefoste, Nov 02 '12 at 16:21
That does sound really strange... I just went through the documentation of the queue method. You **are** using a version of JQuery > 1.4 right? Otherwise you need to manually dequeue your function... — MarioDS, Nov 02 '12 at 16:22
Try adding a .dequeue() after the last closing in your code. There is a lot of info here : http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me — adeneo, Nov 02 '12 at 16:23
I don't see a queue in the [syntax](http://api.jquery.com/fadeOut/), `.fadeOut( [duration] [, easing] [, callback] )` — Anthony Hatzopoulos, Nov 02 '12 at 16:24
Currently "1500"... I have come up with a workaround using slideDown and fadeIn for the animation to show the popup and using `.animate({ duration: plugin.settings['autoclose'], height: 0, opacity: 0 })` to hide it, which works almost as I'd like it — Chris, Nov 02 '12 at 16:31

score 1 · Answer 1 · answered Nov 02 '12 at 16:25

1

As an alternative suggestion, could you not just use animate and change the height and the opacity within the animate function? like so:

$(this).animate({ height:"whateverheight", opacity:"whateveropacity" }, whateverspeed);

answered Nov 02 '12 at 16:25

Quinny

209
4
9

I did try that with some success (i.e. using 'toggle') but it never started or returned to a height of 0 like slide up and down does. – Chris Nov 02 '12 at 16:26

score 1 · Answer 2 · answered Nov 02 '12 at 16:33

1

adeneo was right you'll need to call .dequeue()

http://jsbin.com/opiluy/1/edit

$('#' + plugin.uniqID)
    .delay(plugin.settings['autoclose'])
    .queue(function () {
        $(this)
            .fadeOut({ duration: plugin.settings['speed'], queue: false })
            .slideUp(plugin.settings['speed']);
        }).dequeue();

answered Nov 02 '12 at 16:33

Anthony Hatzopoulos

10,437
2
40
57

This works perfectly on jsBin but not in my plugin, ill look into it – Chris Nov 02 '12 at 16:40

score 1 · Answer 3 · answered Nov 02 '12 at 16:37

1

You just need to specify queue: false for both animation calls. This will work fine.

$('#' + plugin.uniqID)
.delay(plugin.settings['autoclose'])
.queue(function () {
    $(this)
        .fadeOut({ duration: plugin.settings['speed'], queue: false })
        .slideUp({ duration: plugin.settings['speed'], queue: false });
    });

answered Nov 02 '12 at 16:37

Andrey Sbrodov

88
4

This seems to call the fadeOut / slideUp the instant the previous animation (of showing the notficiation) finishes – Chris Nov 02 '12 at 16:40
[This seems to work as well](http://jsbin.com/opiluy/4/edit) just like [using dequeue](http://jsbin.com/opiluy/1/edit). Strange I can't find queue option documented though. – Anthony Hatzopoulos Nov 02 '12 at 16:43
Also you can use .stop() function to stop animation. There is an example for you http://jsfiddle.net/pXvaj/ – Andrey Sbrodov Nov 02 '12 at 16:52

jQuery slide and fade out with delay doesnt work

3 Answers3