Fatal编程技术网
  • jquery/
  • 如何使jQuery动画平滑地显示隐藏元素？

如何使jQuery动画平滑地显示隐藏元素？

jquery

如何使jQuery动画平滑地显示隐藏元素？,jquery,Jquery,我注意到，当我尝试设置一个元素的动画时，该元素最初隐藏在视图中，但没有动画-该元素只是立即出现 例如，请尝试以下代码： <html> <head> <style type="text/css"> span {white-space: nowrap; display: none} </style> <script type="text/javascript" src="http://code.jquery

我注意到，当我尝试设置一个元素的动画时，该元素最初隐藏在视图中，但没有动画-该元素只是立即出现

例如，请尝试以下代码：

<html>
  <head>
    <style type="text/css">
      span {white-space: nowrap; display: none}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script type="text/javascript">
      function hide() {
        $("span").animate({width: "hide"}, 2000);
      }
      function show() {
        $("span").animate({width: "show"}, 2000);
      }
    </script>
  </head>
  <body>
    <span>This is a span.</span>
    <button onclick="hide()">hide</button>
    <button onclick="show()">show</button>
  </body>
</html>


span{空白：nowrap；显示：无}
函数hide（）{
$（“span”）.animate（{width:“hide”}，2000年）；
}
函数show（）{
$（“span”）.animate（{width:“show”}，2000年）；
}
这是一个跨度。
隐藏
显示
由于CSS的缘故，
span
元素最初是隐藏的
show（）
-ing它使它简单地立即出现，即使我要求一个2秒的动画。（
hide（）
-ing它工作平稳。）

我怎样才能使它
show（）
也顺利进行

同时，我也注意到了另一个问题：当动画发生时，元素的垂直位置会发生一些变化（如果你仔细观察，你会发现在动画过程中，按钮会稍微低一点，跨度会稍微高一点）。为什么会这样？如何预防

顺便说一句，我在这个例子中使用了
宽度
，但是
高度
也是如此。我正在使用Firefox4

编辑：在阅读了到目前为止给出的答案后，我想强调的是，只有当元素最初被CSS隐藏时，问题才会出现——否则上述代码工作得非常好。另外，我对所有其他类型的动画（比如jQuery自己的
show（）
或
opacity
动画）都不感兴趣——我想要自己的动画（比如我的例子中的
width
）

使用jQuery自己的show（）和hide（）。您可以为这些设置指定持续时间

试试看

.show（'slow'）
和
.hide（'slow'）

或尝试

.fadeOut（）
和
.fadeIn（）

您可以做的另一件事是将不透明度设置为0.0，然后显示隐藏的元素。之后，将不透明度设置为1.0以淡入元素。

我认为这是jQuery中的一个错误。在jQuery开始显示元素之前，它不会设置
display:inline block
。因此它保持
display:inline
，并且具有该样式的元素不会“响应”宽度/高度的更改。所以它不是动画。在隐藏之前，它已正确设置，以便设置动画

我通过将style设置为这样的方式来解决这个问题：

span {white-space: nowrap; display: inline-block; overflow: hidden;}
.span {display: none;}
和html：

<span class="span">This is a span.</span>
<div style="display:inline-block; overflow: hidden;">
    <button onclick="hide()">hide</button>
    <button onclick="show()">show</button>
</div>

这是一个跨度。
隐藏
显示
编辑：我认为按钮正在改变位置，因为将
span
element
display
style设置为
inline block

Edit2：另一种解决方法不是使用
span
，而是使用一些块元素

Edit3：为了防止更改按钮位置，您需要将它们包装在
span
（或其他允许的html标记）中，该标记已设置了相同的
显示
和
溢出
样式，如动画期间的
span
元素。即
显示：内联块；溢出：隐藏。我编辑了代码以反映这一点。
我没有使用jQuery自己的
show（）
和
hide（）
，因为我想要自己的自定义动画（例如设置
width
属性的动画）。在任何情况下，使用这些属性时也会出现相同的问题（它们在一些属性上设置动画；其中一些属性运行平稳，但一些属性运行不平稳）。我强调，只有当元素最初被CSS隐藏时，问题才会出现。
宽度
和
高度
可以被赋予属性
“隐藏”
和
“显示”
。通常情况下，这种方法非常有效。我要强调的是，只有当元素最初被CSS隐藏时才会出现问题。请不要忘记
.slideDown（[duration]）
和
.slideUp（[duration]）
。谢谢，Beniamin！将其设置为内联块工作：）关于位置更改，有什么方法可以防止它？这会损害我的网站的视觉效果。请编辑答案以解决位置更改问题。