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

Question

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?

Answer 1

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.