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

我有两个按钮，播放和暂停

<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> 

                        
                                    
                                    

---

结果 它有点像是把按钮移开，然后再移开。 我如何在戏剧中流畅地淡出暂停和淡出

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

---

您可以使用

playBtn.fadeOut（'slow'，callback）playBtn.fadeOut（'slow'，function（）{console.log（'Fade Out Completed'）；}）

和您可以对

fadeIn（）执行相同的操作
您可以使用
playBtn.fadeOut（'slow'，callback）playBtn.fadeOut（'slow'，function（）{console.log（'Fade Out Completed'）；}）
您可以对
fadeIn（）
做同样的事情，稍微修改一下，将一些id更改为类，这对于modals可能不起作用，但您可以根据自己的喜好进行管理。我不得不把css和脚本标签弄得乱七八糟，才能让它在演示中发挥作用。事实上，它会立即隐藏其中一个，然后在另一个中消失。可能有一种方式也会重叠效果，尽管不确定这是否必要。我精简了FadeIn和Out，需要jQueryUI，这方面存在一些兼容性问题


$（'.btn play'）。打开（'click'，函数（e）{
$（this.prev（）.fadeIn（'slow'）；
$（this.hide（）；
});
$（'.btn pause'）。在（'click'，函数（e）上{
$（this.next（）.fadeIn（）；
$（this.hide（）；
});
函数showmodel（）{
}
a.btn-play{
显示：内联块；
}
a、 btn暂停{
显示：无；
}
i、 fa{
颜色：黑色！重要；
}
.音频组{
背景：黑色；
}
.audiogroup td{
填充：10px；
}
稍微修改了一些内容，将您的一些id更改为类，这对于modals可能不起作用，但您可以根据需要进行管理。我不得不把css和脚本标签弄得乱七八糟，才能让它在演示中发挥作用。事实上，它会立即隐藏其中一个，然后在另一个中消失。可能有一种方式也会重叠效果，尽管不确定这是否必要。我精简了FadeIn和Out，需要jQueryUI，这方面存在一些兼容性问题


$（'.btn play'）。打开（'click'，函数（e）{
$（this.prev（）.fadeIn（'slow'）；
$（this.hide（）；
});
$（'.btn pause'）。在（'click'，函数（e）上{
$（this.next（）.fadeIn（）；
$（this.hide（）；
});
函数showmodel（）{
}
a.btn-play{
显示：内联块；
}
a、 btn暂停{
显示：无；
}
i、 fa{
颜色：黑色！重要；
}
.音频组{
背景：黑色；
}
.audiogroup td{
填充：10px；
}

您可以执行pauseBtn.fadeOut（“slow”，function（）{}）；或者只添加一个时间，.fadeOut（“1000”）；您可以执行pauseBtn.fadeOut（“slow”，function（）{}）；或者只添加一个时间，.fadeOut（“1000”）；
//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();