Question

我有一个分为两个部分的当前网页。顶部包含用于过滤网页上内容的各种控件，底部包含内容网格。

我想要的是将过滤器控件封装在div标签中，该标签最初是完全隐藏的，除了按钮链接之外会说“Click to Expand”。单击按钮链接后，div将向下打开以显示其中的过滤器控件。 然而，我不希望div突然出现，因为这太容易和无聊。我希望div的打开是明显的，因为它向下滑动以暴露内容。

这可能吗？如果是这样，我该如何实现呢？我不是一个CSS猴子，但我用jQuery做了相当多的事情。

提前感谢任何建议。

Answer 1

直接来自http://api.jquery.com/animate/ ......

因此，您可以将点击功能添加到页面上其他位置的按钮，而不是单击div。

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" />

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

Answer 2

您可以使用jQuery slideToggle()。

$('#expandBtn').click(function() {
  $('#filterDiv').slideToggle('slow', function() {
    // Animation complete.
  });
});

Answer 3

作为jQuery的替代方法，还有scriptaculous.js blind down和slide down效果。

div标记，在鼠标单击时向下打开

3 个答案: