CODEWITHSUNDEEP
jqueryshow-hide
SKA
SKA

Reputation: 91

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

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.

Upvotes: 2

Views: 222

Answers (3)

SKA
SKA

Reputation: 91

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.

Upvotes: 0

Stavm
Stavm

Reputation: 8131

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.

Upvotes: 0

Rana Ghosh
Rana Ghosh

Reputation: 4674

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

Upvotes: 1

Related Questions