Question

我昨天开始学习jquery。我有一个带有一些内容的div元素，我想通过改变它的高度来隐藏它：这是脚本

 <script type="text/javascript">
    $(document).ready(function(){
        $("#hide").click(function(){
            $("#cont").animate({
                height: '0'
                },1500);
            $("#cont").hide();
        });
    });
    </script>

<input type="button" value="hide" id="hide">
<div  id="cont">
text here...
</div>

但它不起作用，因为它会自动将display:block设置为#cont元素，因此在动画之后它会开始显示。当我尝试将display:none设置为#cont元素时，它不会发生。你可以帮帮我吗？感谢

Answer 1

您可以使用slideUp方法：

.slideUp()方法可以设置匹配元素的高度。这会导致页面的下半部分向上滑动，似乎隐藏了项目。高度达到0后，显示样式属性将设置为none，以确保该元素不再影响页面布局。

$("#hide").click(function(){
    $("#cont").slideUp();
});

Answer 2

感谢Felix Kling，它有效：但是刚才我找到了带有animate功能的解决方案：看起来像这样

$("#hide").click(function(){
   $("#cont").animate({
    height: '0'
    },1500).hide(1500);
  });

jquery：动画函数问题

2 个答案: