如何在这种情况下切换动画？

Question

我想这样做。当我点击左右时，willshow离开：0，html关闭。 而当我再次点击，willshow离开：-100％，html左右。 我怎样才能认识到这一点？

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 1

您可以在切换时使用元素的当前状态来设置下一个值。试试这个：

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