How to write jquery return function

Question

I have created one menu using div animating in the middle i have structured. present when i clicked on open button that div menu is expending to right side some fixed width. but my requirement is after expanded the menu instead of open "close" word need to append. when click on "close" div menu should collapse to previous width and "open" will come instead of close.

Yoeri · Accepted Answer · 2014-04-21 22:04:10Z

1

The animate function has a complete parameter where you can provide a callback. http://api.jquery.com/animate/

This callback will be triggered after the event completes. In this callback you can edit your values.

Change the class of your li to 'close'. Also: use the 'live' binding. This one will work even with dynamic changing html.

CSS:

.open{
    cursor:pointer;
    background:black;
    color:white;
}
.close {
    cursor:pointer;
    background:black;
    color:white; 
}

JS:

$(".open").live('click', function() {
$("#navMenu").animate({
    width: "82px"
}, {
    queue: false,
    duration: 500,
    complete: function() {
        $(".open").text("<- CLOSE");
        var $this = $(".open");
        $this.removeClass();
        $this.addClass("close");
    }
});
});

$(".close ").live('click', function() {
$("#navMenu ").animate({
        width: "50px"
    }, {
        queue: false,
        duration: 500,
        complete: function() {
            $(".close").text("OPEN - >");
            var $this = $(".close");
            $this.removeClass();
            $this.addClass("open");
        }
    });
});

edited Apr 21, 2014 at 22:04

answered Mar 30, 2012 at 10:50

Yoeri

2,24718 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1254422 Over a year ago

First of all thanks for your answer but just i placed with my code which i placed in my fiddle but it's not working.

Yoeri Over a year ago

I wrote it just out of thin air. I updated my code. Tested in your fiddle :)

user1254422 Over a year ago

thank you... close text is coming but after clicked on close again it should go to Open.... hope you can understand

Yoeri Over a year ago

of course I do. As you can see, the animate function will animate the windows to 84px. As it already is 84px, you won't see anything. My suggestion is to create another click event for $(".close").click() and change your class of your li to "close".

Collectives™ on Stack Overflow

How to write jquery return function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related