I have this slide function /

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!

I have this slide function http://jsfiddle/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!

• javascript
• jquery
• animation
• fade

5 Answers 5

You need animate : http://jsfiddle/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');

Use jQuery's .animate() function:

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

Here's a working fiddle.

Additional Resources:

If you're interested, this site has some great tutorials that will help you familiarize yourself with jQuery's .animate(): http://vandelaydesign./blog/web-development/jquery-animation-tutorials/

Bit late to the party but I got it working:

http://jsfiddle/g7LwM/9/

Same as others, use animate to do height and opacity, however I didn't realise you could toggle them - +1 to the others for that.

Chaining functions is really handy, but when it es to animation, its a bit annoying because it'll perform them in order.

To get fade and slide at the same time, use animate().

 $('#element').animate({ opacity: 'toggle', height: 'toggle' }, "slow", callback_function);       
         or
   The best thing you can do is to write your own animation for it, something in line with:

     var slideDuration = 1000;

        var slideInAnimation = {        
            opacity: 1,    
            height: 'toggle'
        }

        var slideOutAnimation = {       
            opacity: 0,    
            height: 'toggle'
        }

        $('#anotherDiv').hover(function() {
            $('#myDiv').css("opacity", "0").animate(slideInAnimation, slideDuration);
        }, function() {
            $('#myDiv').animate(slideOutAnimation, slideDuration);
        });

   more link:
    http://api.jquery./animate/        
    http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=en

I am not sure whether this is a efficient way.... but it works....!!

Here is the magic:

HTML code :

<div id="frame">


<img src="image.jpg" />


</div>

In CSS :

set display:none for both "#frame" and "img"....

In JS:

$(document).ready(function(){

    $("img").fadeIn(2000);

    $("#frame").slideDown(1000);

});