CODEWITHSUNDEEP
jquery
zahid ali
zahid ali

Reputation: 43

jquery fade and toggle

I have a simple web page with a main h1 on top and two panels at bottom. panel 1 is visible and panel 2 has class .hide.
What I want to do is:
when I click body or h1 - panel 1 should fade out and panel 2 should fade in at the same time.
And for the second panel when i click only on h1 - panel 2 should fade out and panel 1 should fade in again.

Now the code: when I click body it brings panel 2 successfully, and in panel 2 when i click h1 it takes me back to panel 1 successfully. But when I click on h1 on panel 1, it fades out, displays panel 2 for a second and then fades in again and don't display the second panel. What should I do?

$(function() {  
    $('body,h1').on('click',function (){
        $('div.panel-1').fadeOut(1000);
        $('div.panel-2').fadeIn(1000).removeClass('hide');
        return false;
        });
});


$(function() {
    $('h1').on('click',function (){
        $('div.panel-2').fadeOut(1000);
        $('div.panel-1').fadeIn(1000);
    });
});

Upvotes: 1

Views: 247

Answers (4)

zahid ali
zahid ali

Reputation: 43

So here's the final version,it works. Lets have two divs in html with id named panel-1 and panel-2.Add a class of .hide(display:none;) to panel-2. If someone wants to: when clicked body or h1 - panel 1 should fade out and panel 2 should fade in at the same time. And for the second panel when clicked only on h1 - panel 2 should fade out and panel 1 should fade in again.

$(function() {

$('h1').on('click',function (){
    if ( $('div.panel-2').hasClass('hide')) {
    $('div.panel-1').fadeOut(400).addClass('hide',function() {
    $('div.panel-2').removeClass('hide').fadeIn(400);
    return false;
    });
    }

    else if ( $('div.panel-1').hasClass('hide')) {
    $('div.panel-2').addClass('hide').fadeOut(400,function() {
    $('div.panel-1').fadeIn(400).removeClass('hide');
    });
     return false;
    }

    });

$('body').on('click',function (){
    $('div.panel-1').addClass('hide').fadeOut(400,function() {
        $('div.panel-2').fadeIn(400).removeClass('hide');
        return false;
    });
    });

});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

demo jsBin

you have to use event.stopPropagation() for the click event
and use a single class for the sake of simplicity:

$(function() {  
    $('body, h1').on('click',function(e){
      e.stopPropagation();
      $('.panel').fadeToggle();
    });
});

Upvotes: 1

adeneo
adeneo

Reputation: 318352

$(function() {
    $('body').on('click',function (e){
        if ($('div.panel-1').is(':visible')  && e.target.tagName != 'h1'){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }
        return false;
    });

    $('h1').on('click',function (){
        if ($('div.panel-1').is(':visible')){
           $('div.panel-1').fadeOut(1000, function() {
               $('div.panel-2').fadeIn(1000).removeClass('hide');
               $(this).addClass('hide');
           });
        }else{
           $('div.panel-2').fadeOut(1000, function() {
               $('div.panel-1').fadeIn(1000).removeClass('hide');;
               $(this).addClass('hide');
           });
        }
        return false;
    });
});

Just an idea for something simpler, but these things have a tendency to get messed up on many clicks or unexpected behavior:

$(function() {
    $('body, h1').on('click',function (){
        $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000);
        return false;
    });
});

Upvotes: 0

Lycha
Lycha

Reputation: 10187

You seem to attach the two event listeners into H1. You should probably attach only one listener that toggles the visibility of the panels (detect which is visible and toggle accordingly). In your code the listeners are called sequentially. Also, you remove he "hide" class, but you don't add it back anywhere.

Upvotes: 0

Related Questions