CODEWITHSUNDEEP
jquery
Efe
Efe

Reputation: 954

adding effects to show and hide inside a click function

I want to add fade in/out effect into the following show/hide functions Do I add need to add another function inside .hide(...)?

Or would I need to add .fadeIn(1000) after .hide()?

I also wont mind using the toggle effect but whatever I tried, I couldnt make it work.

    $('#editPROFILE').click(function() {
        $("#B_Profile").hide();
        $('#E_Profile').show();         
    });

    $('#viewPROFILE').click(function() {
        $("#E_Profile").hide();
        $('#V_Profile').show();         
    });

Upvotes: 0

Views: 262

Answers (2)

PSL
PSL

Reputation: 123739

Try this way:-

   $('#editPROFILE').click(function() {
      $("#B_Profile").fadeOut(1000,function(){
         $('#E_Profile').fadeIn(1000); // fade in after B has faded out
      });
    });

    $('#viewPROFILE').click(function() {

      $("#E_Profile").fadeOut(1000,function(){
         $('#V_Profile').fadeIn(1000);  // fade in after E has faded out
      });
    });

Upvotes: 0

Wallack
Wallack

Reputation: 792

.fadeIn and .fadeOut are directly a show and hide but with the fade effect. So just use .fadeIn and .fadeOut:

http://api.jquery.com/fadeIn/ (Display the matched elements by fading them to opaque.) http://api.jquery.com/fadeOut/ (Hide the matched elements by fading them to transparent.)

Upvotes: 1

Related Questions