My slide in / out animation is not working in jQuery

Question

Here is the site:

kotechweb.com/new_focus/page/proposal

Please notice that in left corner there is a menu button, I would like the button to slide and hide the menu if menu is open, on the other hand, if the menu is closed, slide in the button and show the menu.

The code is

var is_closed = false;

$("#menu_btn").on("click", function () {
    if (is_closed) {
        $("#menu_right ul").show("slide", {direction: "left"}, 1000);
        $(this).show("slide", {direction: "left"}, 1000);
    } else {
        $("#menu_right ul").hide("slide", {direction: "left"}, 1000);
        $(this).show("slide", {direction: "left"}, 1000);
    }
    is_closed = !is_closed;
});

However, right now the menu_btn is not animated properly; it does not slide, but only hides.

How to fix that?

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Perhaps the problem is that the two animations are done at the same time? Adding 'queue: false' (warning: untested code):

$("#menu_right ul").show("slide", {direction: "left", queue: false}, 1000);
$(this).show("slide", {direction: "left", queue: false}, 1000);

Copied from this question: How to run two jQuery animations simultaneously?

edited May 23 '17 at 11:59

Community

1
1

answered Oct 15 '15 at 18:05

DanielC

357
1
4
10

ok, I see that the command applied to #menu_right ul is 'show' and 'hide', and the command applied to the button is 'show' and 'show' is that correct? just checking. – DanielC Oct 15 '15 at 18:12

Ahmad Baktash Hayeri · Accepted Answer · 2015-10-15T21:09:48.603

The show() and hide() methods that you've implemented in fact belong to jQuery UI (and NOT jQuery).

Since jQuery's built-in show() and hide() don't support special effects, to get round your problem, I reproduced roughly the same situation using jQuery's animate() method HERE.

The following sums it all up:

Calculate the width of #menu_right ul, say in a variable slideSpan.

Set the left property of both the #menu_right ul and #menu_btn to as much as the slideSpan while closing, and to 0 when opening it back:

//while closing
$(this).siblings('#menu_right ul').animate({left: -slideSpan}, 1000, 'swing');
$(this).animate({left: -slideSpan}, 1000, 'swing');

// ...
// while opening
$(this).siblings('#menu_right ul').animate({left: 0}, 1000, 'swing');
$(this).animate({left: 0}, 1000, 'swing');

Note: For the animate() to function properly, make sure that the #menu_right, #menu_right ul, and #menu_btn have their CSS positions set (to relative), and that the #menu_right ul and #menu_btn are floating to left.

Animations created via animate() run simultaneously, due to the queue property of the method defaulting to false.

But the ones in jQuery and jQuery UI are quite different. Check [this](https://api.jqueryui.com/show/) out. — Ahmad Baktash Hayeri, Oct 15 '15 at 20:46
Ohhh, you're right. My mistake. I usually end up using both and misremembered. — zfrisch, Oct 15 '15 at 20:52

My slide in / out animation is not working in jQuery

2 Answers2