CODEWITHSUNDEEP
jquery
wyc
wyc

Reputation: 55283

how to add an opacity fading effect to to the jquery slidetoggle?

I'm using the following code to slide up and down a div:

$(document).ready(function(){
    $(".toggle-button").click(function () {
        $(".about").slideToggle("slow");
    });
});

I will like to add a fade in and fade out effect to the toggle button. Any suggestions about how to do that?

Upvotes: 16

Views: 10018

Answers (1)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263037

A simple way to achieve this is to pass the toggle value to animate():

$(document).ready(function() {
    $(".toggle-button").click(function() {
        $(".about").animate({
            height: "toggle",
            opacity: "toggle"
        }, "slow");
    });
});

You can see the results in this fiddle.

Upvotes: 23

Related Questions