JQuery show() and hide() within the same loop

Question

I have the following piece of code, I need to show or hide the panels. My question is, the show() works on alternative clicks only.

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.show();

I would like to know the reason why show() does not work consistently.

I figured that if I use allPanels.hide(2000); and allPanels.show(1000); or allPanels.show(2000); it works but not if allPanels.show(); — SKA
– SKA, Commented Apr 22, 2017 at 9:28
You're using animation so you can shot after they are hidden allPanels.hide(2000, function() { $(this).show() }); — Alon Eitan
– Alon Eitan, Commented Apr 22, 2017 at 9:30
Thanks Alon and @Rana - I guess I was not clear enough. I wanted to know why show() was not able to display the elements unless show(1000) was called. Nevertheless, thanks for your reply. — SKA
– SKA, Commented Apr 22, 2017 at 10:12

Rana Ghosh · Accepted Answer · 2017-04-22 09:30:52Z

1

That's not working because you set time in .hide(2000). You have to write in following way::

HTML

<div class="panel" >This is a DIV</div>
<button type="button" class="buttonClick" >Click me</button>

JQUERY

$(document).ready(function (e) {
    $(document).on('click', '.buttonClick', function () {
        var allPanels = $(".panel");
        allPanels.hide(2000, function(){
            allPanels.show();
        });
    });
});

answered Apr 22, 2017 at 9:30

Rana Ghosh

4,6745 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rana Ghosh Over a year ago

@Sujit Please accept the answer if it is right for helping others.

Stavm · Accepted Answer · 2017-04-22 10:52:47Z

0

an easier approach would be to .stop() the current animation just before you start another one.

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.stop().show();

this way you won't have to place the code in the callback. do notice though, doing this will explicitly pause the animation ignoring its current state.

answered Apr 22, 2017 at 10:52

Stavm

8,1515 gold badges48 silver badges73 bronze badges

1 Comment

SKA Over a year ago

allPanels.stop().show(); did not work, threw an exception.

SKA · Accepted Answer · 2017-04-23 01:23:45Z

0

When I removed the animation timing from the

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.stop().show();

Changed to

var allPanels = $(".panel");
allPanels.hide();
allPanels.stop().show();`enter code here`

it started working. Hide and Show works seamlessly. Thanks. But can anyone say why hide and show with timing does not work.

answered Apr 23, 2017 at 1:23

SKA

911 silver badge8 bronze badges

Collectives™ on Stack Overflow

JQuery show() and hide() within the same loop

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related