Jquery slide down div after an item fades in

Question

Hey guys,

this is my jquery code

        jQuery(document).ready(function(){  
            jQuery('.start_video').click(function(){
                jQuery(this).fadeOut("slow", function(){
                    jQuery('#video').animate({ opacity: 'show' }, "slow");
                    jQuery('#video_stream').animate({slideDown: 'slow' }, "slow");
                });
            });

            jQuery('.close_video').click(function(){
                jQuery('#video').fadeOut("slow", function(){
                    jQuery('.start_video').fadeIn("slow");
                });
            });
        });   

Here is my html code

<div id="video_stream">
    <a href="#" class="start_video">Start Video</a>

    <div id="video" class="hidden">
        <a href="#" title="#" class="close_video">Close</a> 
    </div>
</div>
</div>

I have some standard CSS. When the start_video link is clicked, the start_video link fades out and after that, the video div fades in. Inside the video div is a close_video link. When that link is clicked, the video div fades out and the start_video link fades in. However, I want to also have the "video_stream" div that wraps everything to slide down as its height changes with the fading in of "video" and also slideUp when the height changes with the fadeOut of "video".

I was wondering how to do this. I tried adding in slideUp functions in Jquery but I think I was putting them in the wrong place. I also tried the .animate() function using the slideUps but that did not work. I want it to be a smooth slideDown while the "Video" div is fading in and vice versa.

Thanks in advance!

Answer 1

slideDown() is actually just a way to show() by sliding down, so you don't want to call it on #video_stream since it should always be visible.

Also, fading in does not cause something to gradually grow in height; the size is allocated all at once and then it fades in.

If you want the bottom of #video_stream to slide as #video fades in and out, you'll have to have something inside of it sliding up and down to gradually change the height of #video_stream.

The simplest way to accomplish this is to forget about fading and use sliding to hide and show everything:

 jQuery(document).ready(function(){  
        jQuery('.start_video').click(function(){
            jQuery(this).slideUp("slow", function(){
                jQuery('#video').slideDown("slow");
            });
        });

        jQuery('.close_video').click(function(){
            jQuery('#video').slideUp("slow", function(){
                jQuery('.start_video').slideDown("slow");
            });
        });
 });

This may not be exactly what you're looking for, but it should be a start.

You may also want to use unique ids on your links instead of classes, since this jQuery script will act on all elements with class start_video and close_video, if there are multiple.

Answer 2

hello carillonator, Thanks for the response!. I ended up using the jquery UI library and using the standard .show and .hide methods. I used the "bind" type for the effect. It worked out well for me. The code remained almost the same as the original I had.

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
    </script>

      <script type="text/javascript">
        jQuery(document).ready(function(){  
            jQuery('#start_video').click(function(){
                jQuery(this).fadeOut("slow", function(){
                    jQuery('#video').show("blind", 500);

                });
            });

            jQuery('#close_video').click(function(){
                jQuery('#video').hide( "blind", 500, function(){
                    jQuery('.start_video').fadeIn("slow");
                });
            });
        });   
    </script> 

HTML Code

<div id="wrapper">

<div id="video_stream">
    <a href="#" title="launch video stream" id="start_video"><img src="images/video_start.png" width="800" height="56" alt="launch video stream (800x600)" border="0"/></a>

    <div id="video" class="hidden">
        <a href="#" title="close the video" id="close_video"><img src="images/video_close.png" width="44" height="44" alt="close the video" border="0" /></a> 
    </div>
</div>
</div>

This should work out for anybody looking to do this. The no conflict is in there because I added this code to my wordpress installation which had some prototype running as well.