2016-11-08 16 views
1

私はこのようにしたいです。私が約をクリックすると、willshowは左:0、html閉じる。 そしてもう一度クリックすると、willshow:-100%、html about。 どうすれば実現できますか?この状況でアニメーションを切り替えるにはどうすればよいですか?

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

    }); 

答えて

0

トグル時に、要素の現在の状態を使用して次の値を設定できます。

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

+0

テキストは 'toggle'ingです:これを試してみてください。しかし、左のCSSはトグルされません。 – jungmyung

+0

あなたは正しいです、現実的な例で更新された回答も –

+0

あなたは最高です。どうもありがとうXD !!!!私はこの方法を知らなかった。私はあなたにタンクを学ぶ – jungmyung

関連する問題