javascript - 如何使用 jQuery 平滑地隐藏和显示按钮？

Question

我有 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 播放？

我应该如何构建不同的代码以实现这一目标？

Answer 1

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