jQuery

Question

I 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();

结果

有点像移开按钮然后移回。我该如何平滑淡出暂停和淡入播放？

我应该如何构造与众不同的代码以实现目标？

Answer 1

您可以使用Bar，使其成为playBtn.fadeOut('slow', callback);，并且可以为playBtn.fadeOut('slow', function() { console.log('Fade Out Completed'); });做同样的事情。

Answer 2

进行了一些修改，可以将您的某些ID更改为类，这可能不适用于模态，但是您可以根据需要进行管理。我不得不弄乱css和script标签，以使其全部用于演示。实际上，它会立即隐藏其中一个，然后逐渐消失。尽管不确定是否有必要，但也可能有一种方法可以重叠效果。我缩小了FadeIn和Out所需的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（），但似乎可行。

如何使用jQuery顺利隐藏和显示按钮？

jQuery

结果

2 个答案: