Question

如何更改下面的页面和代码，以便当我的“新闻”P淡出其下方的内容时...平滑地向上滑动而不是跳跃。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

      <script>
      $(document).ready(function(){

        $("a").click(function () 
        {
          $("p").fadeOut(2000); 
          return false;
        }); 

      });
      </script>

    <style>
    p { 
        position:relative; 
        width:400px; 
        height:90px;
        background-color:#0099CC; 
    }

    </style>

    </head>

    <body>

    <p>
        this is a news box. it will fade out when the x is clicked that is all. (<a href="#">x</a>)
    </p>


<br />
does this shift up after fade out.<br />
</body>
</html>

Answer 1

当元素淡出时，它可能会跳起来。

您可以尝试将其淡化为0.001，因此它几乎不可见，然后使用回调功能将p的高度设置为0。

Answer 2

尝试慢慢更改height的{{1}}，这将是您问题的最佳解决方案。

Answer 3

查看此类似问题的接受答案： How to chain events in jQuery

此答案（针对不同的问题）fadeOut then slideUp似乎完全符合您的要求。

在jquery中组合效果

3 个答案: