项目淡入后Jquery向下滑动div答案

【问题标题】：Jquery slide down div after an item fades in项目淡入后Jquery向下滑动div
【发布时间】：2010-01-19 20:01:00
【问题描述】：

这是我的 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 淡入。video div 内部是一个 close_video 链接。单击该链接时，视频 div 淡出，start_video 链接淡入。但是，我还希望有一个“video_stream” div，它包裹着所有东西，随着它的高度随着“视频”的淡入而变化，并且还当高度随着“视频”的淡出而变化时滑动。

我想知道如何做到这一点。我尝试在 Jquery 中添加 slideUp 函数，但我认为我把它们放在了错误的位置。我还尝试了使用 slideUps 的 .animate() 函数，但没有奏效。我希望它在“视频” div 淡入时平滑向下滑动，反之亦然。

提前致谢！

【问题讨论】：

video_stream div 有固定高度吗？如果没有，它会根据内容自动调整。
不，它有一个高度：auto;值并且它确实会自动调整，我只是希望它能够平滑地上下滑动，而不是仅仅弹出到那个大小。

标签： javascript jquery

【解决方案1】：

slideDown() 实际上只是通过向下滑动到达show() 的一种方式，因此您不想在#video_stream 上调用它，因为它应该始终可见。

另外，淡入并不会导致某些东西逐渐变高；大小是一次性分配的，然后淡入。

如果您希望#video_stream 的底部随着#video 的淡入和淡出而滑动，则您必须让其中的某些东西上下滑动以逐渐改变#video_stream 的高度。

完成此操作的最简单方法是忘记淡入淡出并使用滑动来隐藏和显示所有内容：

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

这可能不是您想要的，但它应该是一个开始。

你可能还想在你的链接上使用唯一的 ids 而不是 classes，因为这个 jQuery 脚本将作用于类 start_video 和 close_video 的所有元素, 如果有多个。

【讨论】：

您使用 ID 而不是类是正确的。我完全忽略了它

【解决方案2】：

感谢您的回复！。我最终使用了 jquery UI 库并使用了标准的 .show 和 .hide 方法。我为效果使用了“绑定”类型。对我来说效果很好。代码几乎和我原来的一样。

<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 安装中，它也运行了一些原型。

【讨论】：