Jquery在项目淡入后向下滑动div

Question

这是我的jquery代码

        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");
                });
            });
        });   

这是我的html代码

<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>

我有一些标准的CSS。当单击start_video链接时，start_video链接淡出，之后，视频div淡入。在视频div中有一个close_video链接。单击该链接时，视频div淡出，start_video链接淡入。然而，我也想有"video_stream“的div包装一切滑下来，因为它的高度随着淡入的”视频“，也slideUp时，高度变化的fadeOut的”视频“。

我想知道该怎么做。我尝试在Jquery中添加slideUp函数，但我认为我把它们放错了地方。我还尝试了使用slideUps的.animate()函数，但不起作用。我希望它是一个平滑的slideDown，而“视频”的div正在淡入，反之亦然。

提前感谢！

Answer 1

谢谢你的回复！我最终使用了jquery UI库和标准的.show和.hide方法。我使用了"bind“类型来实现效果。这对我来说效果很好。代码几乎和我原来的一样。

<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代码

<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>

对于任何想要这样做的人来说，这应该是可行的。之所以没有冲突，是因为我将这段代码添加到了我的wordpress安装中，该安装也运行了一些原型。