김정명 김정명 - 26 days ago 18
Javascript Question

how can I toggle animation in this situation?

I want to make like this. when I click about, willshow left : 0, html close.
And when I click again, willshow left : -100%, html about.
How can I realize this?

var about = $('ul.about > li > span.activebtn');
var willshow = $('div.willshow');

about.on('click', function(){

willshow.animate({
'left': '0'
}, 500);
about.html('close');

if($(this).html() == 'close'){
about.click(function(){
willshow.animate({
'left': '-100%'
}, 500);
about.html('about');
});
}

});

Answer

You can use the current state of the element to set the next value when being toggled. Try this:

var $about = $('ul.about > li > span.activebtn');
var $willshow = $('div.willshow');

$about.on('click', function() {
    $willshow.animate({ 
        left: $willshow.css('left') == '0px' ? '-100%' : 0
    }, 500);
    $about.text(function(i, t) {
        return t == 'close' ? 'about' : 'close';
    });
});

Working example

Comments