THE HAM MEDIA BLOG

jQuery で要素の CSS のプロパティの値を取得する方法 | ウェブル

内容を見ると、CSS のプロパティの値を取得する方法ってよりも、.toggle()で交互に別なイベント動かしたいよ〜！という事らしい。

見てすぐに思わず「できるよ〜」というツイートを@soraiyさんにしてしまったのですが、せっかくなので、.toggle()でも十分できることでしたので、ちょっと作ってみた！

.toggle(function(){A},function(){B})

ネタ元のエントリーではクリックイベントで起こる内容を、CSSのプロパティによって交互に切り替えるようなことをしているのですが、クリックしたイベントの内容を交互に切り替えるようにするには、.toggle()を利用します。

単に.toggle()だけだと、表示と非表示を繰り返すイベントなのですが、.toggle(function(){A},function(){B})とすると、AとBが交互に繰り返し実行されるよになります。

簡単なデモを作ってみることにします。

■コード

jQuery(function($){
  $('button','#demo1').toggle(function(){
    $(this).text('もう一回押してみて');
    $('#targetElm01').fadeTo('slow',0,function(){
      $(this).hide();
      alert('display プロパティが none 時のアクション');
    });
  },function(){
      $('#targetElm01').slideDown().fadeTo('slow',1,function(){
        alert('display プロパティが block 時のアクション');
    });
  });
});

最初のクリックで、ボタンの文言を変えて、その下のブロックを透明化した後に非表示にし、「'display プロパティが none 時のアクション」というアラートを表示します。もう一度ボタンを押すと、ブロックを再度表示してから透明化を元にもどし、「display プロパティが block 時のアクション」のアラートを表示します。

■HTML

<div id="demo1">
<button>押してくれ</button>
<div id="targetElm01">ここが消えるぜ！</div>
</div>

■デモ

いかがでしたでしょう。

ついでにもう一つの表示非表示を繰り返すだけの.toggle()を見てみましょう。

.toggle()

■コード

jQuery(function($){
  $('button','#demo2').click(function(){
    $('#targetElm02').toggle('slow');
  });
});

■デモ その２

動作を見てもらえたらわかるかもしれませんが、通常の.toggle()は.show()と.hide()を繰り返す動作をします。

これで違いが理解してもらえたでしょうか。

別々のイベントを設定したい時は、.toggle(function(){A},function(){B})を利用しましょう。

ちなみに、２つだけじゃなく、複数指定することもできます。