CODEWITHSUNDEEP
javascriptjqueryhtmlcsslaravel-blade
code-8
code-8

Reputation: 58642

How can I smoothly hide and show a button using jQuery?

I 2 buttons, play and pause.

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

Result

It kind of shift out the buttons and shift back in. How do I do the smooth fadeOut the pause and fadeIn the play ?

How should I structure my code different to achive that ?

Upvotes: 0

Views: 355

Answers (2)

SScotti
SScotti

Reputation: 2328

Modified things a bit to change some of your id's to classes, which may not work regarding modals, but you can manage that as you like. I had to mess around with the css and script tags to get it all to work for a demo. As it is, it hides one immediately and then fades in the other. Probably a way overlap the effects also, although not sure that is necessary. I thin the FadeIn and Out require Jquery UI and there are some compatibility issues with that.

$('.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>

Probably should hide() first, but seems to work.

Upvotes: 1

Akhilesh
Akhilesh

Reputation: 968

You can use playBtn.fadeOut('slow', callback); so it can be playBtn.fadeOut('slow', function() { console.log('Fade Out Completed'); }); and you can do the same thing for fadeIn().

Upvotes: 1

Related Questions