THE HAM MEDIA BLOG

要素を表示した時と非表示にした時にそれぞれ別のアクションを実行する方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
Toggle

内容を見ると、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');
  });
});

■デモ その2

ここが消えるぜ!

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

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。