0

我似乎在这里遗漏了一些东西，所以如果有人可以向我解释幕后发生的过程，我将不胜感激。

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

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

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

再次，我想知道我所做的事情以及为什么我正在做的事情不起作用的内幕。我敢肯定这与我的大脑大小有关，但让我们好点……

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

4

3 回答 3

2

.slideDown()将采用不可见的元素并通过动画使其可见。如果您首先删除使其不可见的样式，那么它将立即出现。一旦它是可见的.slideDown()将什么都不做。

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

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

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

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

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

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

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

于 2012-10-18T19:08:38.527 回答
1

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

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

于 2012-10-18T19:08:51.720 回答
0

这个问题已经有了很好的答案，但我还是做了一个小提琴。希望能帮助到你。我更改了您的演示，因此您不必使用内联样式。在此处阅读更多信息。

//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; }
于 2012-10-18T19:20:46.527 回答