Javascript- Using CSS opacity information

Question

I'm puzzled about getting a simple toggle to work that should be fairly simple. I want the div to fade out when the opacity is 100 and fade in when it is 0. http://jsfiddle.net/mGdcm/8/

Javascript-

$('#toggleButton').click(function() {
if ($('#toggleSection').css("opacity") === 0) {
    $('#toggleSection').fadeIn("slow");
}
else {
    $('#toggleSection').fadeOut("slow");
}
return false;
});

HTML-

<a href="#" id="toggleButton">toggle</a>
    <div id="toggleSection" style="opacity:0;"> <p>Why isn't this working?</p></div>

.css("opacity") returns a string, so you'd need === "0" or == 0. And you'd need .fadeTo("slow", 1) since you're not setting the display css property. — user113716
– user113716, Commented Oct 18, 2011 at 1:24

Will · Accepted Answer · 2011-10-18 01:25:15Z

2

You can just use the jQuery fadeToggle function.

$('#toggleButton').click(function() {
    $("#toggleSection").fadeToggle("slow");
});

http://jsfiddle.net/mGdcm/16/

edited Oct 18, 2011 at 1:25

answered Oct 18, 2011 at 1:19

Will

20.4k7 gold badges50 silver badges48 bronze badges

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

3 Comments

Ray Toal Over a year ago

+1 learned something new (fadeToggle). Nice. New in jQuery 1.4.4 I just read. :)

user998266 Over a year ago

Thank you! Is it possible for the fadeToggle to work when the opacity starts at 0? I think that is my major source of difficulty.

user113716 Over a year ago

@user998266: You'd need to set display:none if that works with your design. If not, use .fadeTo("slow", 1) and .fadeTo("slow", 0) instead of fadeIn/fadeOut. Like this. Or this.

Ray Toal · Accepted Answer · 2011-10-18 01:15:02Z

1

You need to set jQuery in your fiddle, not MooTools. :)

Also for fading back in, check that the css display property is equal to "none".

Fixed version for you at http://jsfiddle.net/mGdcm/14/.

answered Oct 18, 2011 at 1:15

Ray Toal

88.7k20 gold badges186 silver badges245 bronze badges

4 Comments

user998266 Over a year ago

AH thanks! But it seems to still not work if I set it to jQuery. Is it working for you?

Ray Toal Over a year ago

It fades out fine, but it does not fade back in, because fadeOut takes the opacity down to zero THEN sets display to none. Working on it.

user998266 Over a year ago

Thank you for your help! Do you know of a way to make this toggle work if the div starts at opacity:0?

Ray Toal Over a year ago

Interesting problem. I got it to work with fadeTo (jsfiddle.net/mGdcm/24) but not with fadeIn and fadeOut.

Joe · Accepted Answer · 2011-10-18 01:27:14Z

1

You need to use jQuery, and the correct code using visible selector:

$('#toggleButton').click(function() {
    if ($('#toggleSection:visible').length < 1) {
        $('#toggleSection').fadeIn("slow");
    }
    else {
        $('#toggleSection').fadeOut("slow");
    }
    return false;
});

Example

Example starting with not visible

edited Oct 18, 2011 at 1:27

answered Oct 18, 2011 at 1:15

Joe

82.9k18 gold badges130 silver badges147 bronze badges

4 Comments

user998266 Over a year ago

Thank you! Could you please post an updated jfiddle where you have it working? I pasted that code and ran it with jQuery but the toggle did not work. Do I need to change something in the HTML?

Joe Over a year ago

on the left side of jsfiddle, do you see Choose Framework and underneath that MooTools?

user998266 Over a year ago

Thank you for the example! Is there a way to make it work so that the div starts out with opacity:0?

Joe Over a year ago

style="display:none;" instead of style="opacity: 0"

Moe Sweet · Accepted Answer · 2011-10-18 01:22:04Z

0

Not a very good solution but it works :)

$('#toggleButton').click(function() {
    console.log($('#toggleSection').css("opacity"));
    if ($('#toggleSection').css("opacity") == 0) {
        $('#toggleSection').fadeIn("slow", function(){
            $('#toggleSection').css("opacity", 1);
        });
    }
    else {
        $('#toggleSection').fadeOut("slow", function(){
            $('#toggleSection').css("opacity", 0);
        });
    }
    return false;
});

answered Oct 18, 2011 at 1:22

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

Javascript- Using CSS opacity information

4 Answers 4

3 Comments

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related