【问题标题】：How can I smoothly hide and show a button using jQuery?如何使用 jQuery 平滑地隐藏和显示按钮？
【发布时间】：2019-11-22 12:22:43
【问题描述】：

我有 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();

结果

这有点像移出按钮然后移回。如何在播放中平滑淡入淡出暂停和淡入淡出？

我应该如何构建不同的代码来实现这一点？

【问题讨论】：

你可以做 pauseBtn.fadeOut( "slow", function() {});或者只是添加一个时间，.fadeOut("1000");

标签： javascript jquery html css laravel-blade

【解决方案1】：

你可以使用playBtn.fadeOut('slow', callback);，所以它可以是playBtn.fadeOut('slow', function() { console.log('Fade Out Completed'); });，你可以对fadeIn()做同样的事情。

【讨论】：

【解决方案2】：

修改了一些东西以将您的一些 id 更改为类，这对于模态可能不起作用，但您可以根据需要进行管理。我不得不弄乱 css 和 script 标签才能让它全部用于演示。事实上，它会立即隐藏一个，然后淡入另一个。可能也是一种重叠效果的方式，尽管不确定这是必要的。我淡化淡入淡出需要 Jquery UI，并且存在一些兼容性问题。

$('.btn-play').on('click', function(e) {
$(this).prev().fadeIn('slow');
$(this).hide();
});

$('.btn-pause').on('click', function(e) {
$(this).next().fadeIn();
$(this).hide();

});

function showModal () {
}

a.btn-play{
  display:inline-block;
}
a.btn-pause{
  display:none;
}
i.fa {
  color:black !important;
}
.audiogroup {
  background:black;
}
.audiogroup td{
  padding:10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>




<table class ="audiogroup">

<tr >
<td>

<a href="#" class="btn btn-warning btn-sm text-warning btn-pause" onclick="showModal('1', 'pause')"><i class="fa fa-pause"></i></a>

<a href="#" class="btn btn-success btn-sm text-success btn-play" onclick="showModal('1', 'resume')"><i class="fa fa-play text-success"></i></a>

<a href="/client-summary/1/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('1', 'delete')"><i class="fa fa-trash text-danger"></i></a>

</td> 
</tr>
</table>

可能应该先 hide()，但似乎有效。

【讨论】：