ansaurus

Question

Answer 1

A:

You say that your code uses a button. Since I can't see your html I'll assume you're using either an input tag or a button tag and not an anchor tag. In any case try changing your selector to this.

$("#show-background")

Also as Emil Ivanov mentioned your calls are canceling each other out. A way around this is to do the following. Assuming that what it is you're hiding is to be shown initially...

$("#show-background").click(function () {
  if ($("#content-area").hasClass("bg_hidden")){
    $("#content-area")
      .removeClass("bg_hidden")
      .stop()
      .fadeIn("slow");

    $("#show-background").text("Hide Me Text");
  }
  else{
    $("#content-area")
      .addClass("bg_hidden")
      .stop()
      .fadeOut("slow");

    $("#show-background").text("Show Me Text");
  }
});

Ryan 2010-01-27 14:56:29

Awesome that works almost perfectly thanks a lot Ryan. I was using a simple anchor tag. If I wanted to toggle the text within the anchor tag to say show text instead of show background would I use something like .append("Show text"); ?

mtwallet 2010-01-27 15:21:54

I feel this is a bit overkill for something that could be done with one command, plus you reserve the `hidden` class name this way ..

Gaby 2010-01-27 15:26:12

@mtwallet I've adjusted the code in my example to do what you're asking about. Just swap out the "hide me text" and "show me text" with whatever text you want.@Gaby I agree but for illustrative purposes it works. As far as the reserved class name I just used it as another illustrative example so that he could understand what is going on in the code more easily.@mtwallet as Gaby said you may want to swap out the word "hidden" in my code with something else meaningful to you as "hidden" is usually a reserved class name.

Ryan 2010-01-27 15:30:23

Excellent thanks a lot for your help guys it is much appreciated.

mtwallet 2010-01-27 15:58:48

Ryan, I've just got a couple of small problems with the code you gave. It won't animate out smoothly it just disappears also when the button is clicked it gets stuck in a loop showing the text outside the anchor tag. Any ideas why? I uploaded a sample for you here - http://www.nicklansdell.com/sample/services.html

mtwallet 2010-01-27 16:47:44

Ryan sorted the text issue myself. Just stuck with the fade out. Thanks

mtwallet 2010-01-27 17:24:15

@mtwallet after viewing your stylesheets it appears you already have a class called .hide which sets the display = none. The code is adding that class to your background before it starts to fade out so it hides it before it can fade out properly. To remedy this in the code I've given you, just replace the class name with something else for which you don't already have a class defined in your css. I recommend "bg_hidden". I've adjusted my answer above with these changes.

Ryan 2010-01-27 17:38:46

Ryan thanks again for your help its really helping me learn! Can I ask why in the jQuery code do I need to add a class at all if it does not actually hook up to a css rule? I did put the hide class there on purpose because I thought it would be needed. Again thanks for your help.

mtwallet 2010-01-28 09:22:08

Also now I have removed the css class it does hide at all. I have updated my page if you don't mind having a look?

mtwallet 2010-01-28 09:53:10

@Ryan the penny has dropped! I understand why you use the addClass but still cannot figure out why the fadeOut is not working any help will be appreciated.

mtwallet 2010-01-28 11:24:57

@mtwallet ok, sorry, there was an error in my code. It was setting the inner text of the content div to "Show Me/Hide Me text" instead of the links inner text. I've fixed the code above to reflect this fix.

Ryan 2010-01-28 14:43:52

Answer 2

+2 A:

Try something like this, currently you're hiding/showing at the same time resulting in nothing:

$("a#show-background").click(function () {
    $("div#content-area:visible").stop().fadeOut("slow");
    $("div#content-area").not(":visible").stop().fadeIn("slow");
});

This will hide if it's visible, show if it's not...and if clicked mid-way, stop the current animation and start going the other way.

Nick Craver 2010-01-27 15:03:18

Answer 3

+2 A:

Do you mean toggling?

$("a#show-background").toggle(
    function () {
        $("div#content-area").fadeOut("slow");
    },
    function () {
        $("div#content-area").fadeIn("slow");
    }
);

Satoru.Logic 2010-01-27 15:04:29

Answer 4

+4 A:

Like Emil Ivanov wrote, the two event handlers push out each other, so if you want to toggle the visible state of the div with the same anchor, use the toggle method:

$("a#show-background").click(function() {
    $("div#content-area").toggle("slow");
});

egyedg 2010-01-27 15:05:00

Thanks for the help egyedg

mtwallet 2010-01-27 15:22:23

Answer 5

A:

if you want to achive the same fadeIn/Out effect then

$("#show-background").click(
             function(){ 
                        $("div#content-area').animate({opacity: 'toggle'}, 'slow'); 
                       }
              );

would do it ..

Gaby 2010-01-27 15:15:19

Gaby I just tried your simplified version above now I have a better understanding of how the code works. At first it didn't work at all so I tried amending it to: $("#show-background").click( function(){ $("div#content-area").animate({opacity: 'toggle'}, 'slow'); });This now does what my original code did which is to simply fade in. Is there something I am missing?

mtwallet 2010-01-27 16:11:21

@mtwallet , You are correct, i had omitted (by accident) the selecter of the actual `content-area`. Using the toggle keyword should make the animation to fadeIn OR FadeOut on each consecutive click ..

Gaby 2010-01-27 17:08:55

ansaurus

tags:

views:

answers:

Jquery Click Btn Fade in/out

related questions