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，它包含所有内容以随着其高度随着“视频”的淡入而变化而向下滑动使用“视频”的fadeOut更改高度时的slideUp。

我想知道如何做到这一点。我尝试在Jquery中添加slideUp函数，但我想我把它们放在了错误的地方。我也尝试使用slideUps的.animate（）函数，但是没有用。我希望它是一个平滑的slideDown，而“Video”div正在淡入，反之亦然。

提前致谢！

Answer 1

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

此外，淡入不会导致高度逐渐增长;大小一次性分配，然后淡入。

如果你希望#video_stream的底部在#video淡入淡出时滑动，你必须在其内部滑动到上下< i>逐渐改变#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 而不是类，因为此jQuery脚本将对类start_video和{的所有元素起作用{1}}，如果有多个。

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

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

2 个答案: