Question

我似乎在这里遗漏了一些东西，所以如果有人能向我解释正在进行的过程，我会非常感激。

我想要完成的是在删除隐藏该特定元素内容的元素上的CSS之后获得jQuery提供的.slideDown()效果。

我创造了一个小提琴来解释/展示我正在尝试做的更多事情：

http://jsfiddle.net/iOnline247/4Ztpg/

同样，我想了解内心的内容以及为什么我正在做的事情不起作用。我确定它与我的大脑有关，但让我们很好......

编辑------ 内联样式是HTML从服务器呈现的方式。不幸的是，我无法控制这一点。

Answer 1

.slideDown()将获取一个不可见的元素，并通过动画使其可见。如果您首先删除使其不可见的样式，则会立即显示。一旦可见.slideDown()将无效。

所以问题是，你为什么要首先删除这种风格？为什么你有一个内联样式集？

如果您需要覆盖内联样式（并且由于某种原因，不能只从源HTML中删除它），那么您可以在文档加载时执行此操作：

$(function() {
    $(".some-text").css("display","none");
});

现在您的向下滑动将起作用，您无需删除任何类。使用.css设置样式时，它将覆盖任何内联样式。

编辑：这是一个小提琴演示：

http://jsfiddle.net/VjWEs/1/

注意我将div包装在另一个div中，这样你就可以看到它实际上在显示时显示为块。如果您将.css("display","none");更改为.hide()，您将保留内联显示，但随后它不能再向下滑动，它就会出现。

Answer 2

您应该将所有CSS保留在CSS文件中，而不是使用任何内联样式，从不需要在CSS中使用!important。

话虽如此，在向下滑动之前，您无需删除no-display类。向下滑动后，slideDown会向您的元素添加display:block（如果需要，可以删除回调中的类）。

Answer 3

这个问题已经有了很好的答案，但无论如何我做了Fiddle。希望能帮助到你。我改变了你的演示，所以你不必使用内联样式。详细了解here。

//jQuery
$('#clickme').click(function() {
  $('.some-text').slideDown('slow', function() {
     //slide done, can do more stuff here if u need to
  });
});


<!-- HTML -->
<h3 id="clickme">More Info</h3>
<div class='some-text'>The div to slide</div>


/*CSS*/
.some-text { height: 20px; display: none; }

在删除隐藏元素的css后动画元素

3 个答案: