我有 2 个按钮,播放和暂停。
<td>
<?php
if($service['ue_status'] == "RUNNING"){
$hideMe = 'd-none';
}
?>
<a href="#" class="btn btn-warning btn-sm text-warning btn-pause-{{ $service['session_name'] }}" onclick="showModal('{{ $service['session_name'] }}', 'pause')"><i class="fa fa-pause "></i></a>
<a href="#" class="{{ $hideMe }} btn btn-success btn-sm text-success btn-play-{{ $service['session_name'] }}" onclick="showModal('{{ $service['session_name'] }}', 'resume')"><i class="fa fa-play text-success"></i></a>
<a href="/client-summary/{{ $service['session_name'] }}/graphs" class="btn btn-info btn-sm "><i class="fa fa-chart-area text-info"></i></a>
<a href="#" class="btn btn-danger btn-sm " onclick="showModal('{{ $service['session_name'] }}', 'delete')">
<i class="fa fa-trash text-danger "></i>
</a>
</td>
jQuery
//change play to pause icon
var playBtn = $('#tr-' + sessionNameId).find('.btn-play-'+ sessionNameId);
var pauseBtn = $('#tr-' + sessionNameId).find('.btn-pause-'+ sessionNameId);
console.log(pauseBtn);
console.log(playBtn);
//change play to pause icon
pauseBtn.removeClass('d-none');
playBtn.fadeOut();
结果
它有点移出按钮并移回。 如何实现平滑的 fadeOut 暂停和 fadeIn 播放?
我应该如何构建不同的代码以实现这一目标?
最佳答案
你可以使用 playBtn.fadeOut('slow', callback);
所以它可以是 playBtn.fadeOut('slow', function() { console.log('Fade Out Completed'); });
你可以对 fadeIn()
做同样的事情。
关于javascript - 如何使用 jQuery 平滑地隐藏和显示按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57011952/