CODEWITHSUNDEEP
javascriptjqueryjquery-animate
cCe.jbc
cCe.jbc

Reputation: 117

JQuery click after animate not working

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;
}

Upvotes: 1

Views: 274

Answers (3)

cCe.jbc
cCe.jbc

Reputation: 117

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.

Upvotes: 0

Fakhir Shad
Fakhir Shad

Reputation: 1101

$('#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

Upvotes: 0

labago
labago

Reputation: 1346

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

Upvotes: 1

Related Questions