Question

I have this slide function http://jsfiddle.net/g7LwM/1/

How can I add fade effect to it? So while it is sliding down it fades in and when it is sliding back up it fades out?

Important: I noticed that most answers use toggle transition, it is different from slide transition I have. Toggle and slide have different transitions!

Answer 1

You need animate :
http://jsfiddle.net/manseuk/g7LwM/7/

$(document).ready(function () {
    $("#trigger").click(function () {
        $("#test").animate({opacity: 'toggle', height: 'toggle'});
    }); 
})

You can add in duration too :

$("#test").animate({opacity: 'toggle', height: 'toggle'},'slow');