引数
- (string|number)duration
- (string)easing
- (function)callback
フェード効果ありの.toggle()
jQueryオブジェクトが保持しているDOM要素が表示なら非表示に、非表示なら表示にする。
コールバックは1つの要素に対する動作が完了したときに実行される。対象が10個なら10回実行される。callback内のthisは対象要素。
サンプル
Javascript
$('#sample-1').on('click', '#execute-1', function(e){
const screen = $('#sample-1 .screen');
let count = 0;
let text = '';
$(e.target).parent().find('.photo').fadeToggle('normal', function(){
screen.append(count + ' : ' + $(this).find('img').attr('alt') + '<br />');
count++;
});
});
HTML
<div id="sample-1">
<div class="photos">
<span class="photo"><img src="/resource/images/photos/2.jpg" alt="画像1"></span>
<span class="photo"><img src="/resource/images/photos/3.jpg" alt="画像2"></span>
</div>
<span class="cq-btn m-primary" id="execute-1">toggle</span>
<div class="screen"></div>
</div>