HOME > > > > >

.fadeToggle([duration] [,easing] [,callback])

引数

(string|number)duration
(string)easing
(function)callback

フェード効果ありの.toggle()

jQueryオブジェクトが保持しているDOM要素が表示なら非表示に、非表示なら表示にする。

コールバックは1つの要素に対する動作が完了したときに実行される。対象が10個なら10回実行される。callback内のthisは対象要素。

サンプル

実行結果

画像1 画像2
toggle

Javascript

  1. $('#sample-1').on('click', '#execute-1', function(e){
  2.     const screen = $('#sample-1 .screen');
  3.     let count = 0;
  4.     let text = '';
  5.    
  6.     $(e.target).parent().find('.photo').fadeToggle('normal', function(){
  7.         screen.append(count + ' : ' + $(this).find('img').attr('alt') + '<br />');
  8.         count++;
  9.     });
  10.  
  11. });

HTML

  1. <div id="sample-1">
  2.   <div class="photos">
  3.     <span class="photo"><img src="/resource/images/photos/2.jpg" alt="画像1"></span>
  4.     <span class="photo"><img src="/resource/images/photos/3.jpg" alt="画像2"></span>
  5.   </div>
  6.  
  7.   <span class="cq-btn m-primary" id="execute-1">toggle</span>
  8.   <div class="screen"></div>
  9. </div>