JQuery click after animate not working

Question

When I first click on the #menuIcon div I want it to animate the #menu div left: 0em and then when I click on it a second time animate #menu to left: -12em.

The first part works but when I click again nothing happens. #menuIcon is a child of #menu, does this affect anything?

Here's my JS (adapted from this question, the micro query plugin answer):

$(document).ready(function(){

    jQuery.fn.clickToggle = function(a,b) {
        function cb(){
            [b,a][this._tog^=1].call(this);
        }
        return this.on("click", cb);
    };

    $("#menuIcon").clickToggle(function() {   
        $("#menu").animate({left: "0em"}, 500);
    }, function() {
        $("#menu").animate({left: "-12em"}, 500);
    });
});

Thanks in advance.

As suggested by John S here's the relevant(I think) html:

<div id="menu">

    <div id="menuIcon">
        <div id="menuIcon1"></div>
        <div id="menuIcon2"></div>
        <div id="menuIcon3"></div>
    </div>

</div>

And css:

#menu {
    width: 16em;
    height: calc(100% - 5em);
    background-color: blue;
    position: fixed;
    bottom: 0;
    left: -12em;
}

#menuIcon {
    height: 4em;
    width: 4em;
    position: relative;
    top: 0;
    left: 12em;
    background-color: green;
}

The JavaScript looks OK. You might need to show the relevant HTML and CSS. — John S, Jul 01 '16 at 20:47
I think you're probably right @JohnS . I've added what I think is the relevant HTML and CSS. — cCe.jbc, Jul 02 '16 at 07:42
I created a [jsfiddle](https://jsfiddle.net/e0rwty8y/), and it appears to work fine. — John S, Jul 02 '16 at 17:47

score 1 · Answer 1 · answered Jul 01 '16 at 19:37

Might be easier just use an added class to toggle the direction:

$("#menuIcon").on("click", function() {  
     $this = $(this)

     if(!$this.hasClass("open"))
     {
         $("#menu").animate({left: "0em"}, 500);
         $this.addClass("open");
     }
     else
     {
        $("#menu").animate({left: "-12em"}, 500);
        $this.removeClass("open");
     }
 })

This isnt as clever as what you were trying but I think its a lot easier to read, and should work

It looks fine, but still the same problem @jlane09 think it's probably my html / CSS — cCe.jbc, Jul 02 '16 at 07:32

score 0 · Answer 2 · answered Jul 02 '16 at 07:53

0

$('#menuIcon').toggle(
  function(){
   $("#menu").animate({left: "0em"}, 500);
  } , 
  function(){
   $("#menu").animate({left: "-12em"}, 500);
  }
);

Use the Jquery toggle function and will do the magic for you. Thanks

answered Jul 02 '16 at 07:53

Fakhir Shad

1,071
8
20

That version of the [JQuery `toggle()` function](https://api.jquery.com/toggle-event/) was deprecated in v1.8 and removed in v1.9, so you would have to be including an old version of JQuery to use it. – John S Jul 02 '16 at 17:39

score 0 · Answer 3 · answered Jul 11 '16 at 18:19

0

As John S said, my problem was not with the jQuery but with the rest of my HTML.

I had a div with that overlapped #menu when it was opened. I set #menu 's z-index to 2 and that worked.

answered Jul 11 '16 at 18:19

cCe.jbc

107
1
9

JQuery click after animate not working

3 Answers3