使用 jQuery UI 的 show 功能，没有得到想要的效果答案

【问题标题】：Using jQuery UI's show function, not getting the desired effect使用 jQuery UI 的 show 功能，没有得到想要的效果
【发布时间】：2011-11-08 08:21:02
【问题描述】：

我一直在摸索这个问题，但我想知道是否有人知道如何使用 jQuery 的 show 函数重新创建特定效果。我想做的是从上到下将我的标题/导航栏滑到页面上，标题标签中的所有元素都随着动画移动。

到目前为止，我已经尝试了 $('header').slideUp(1000) ，它给出了拉起窗帘的效果，但标题中的元素是静态的。

我也试过 $('header').show('drop', {direction: 'up'}, 1000)，但这会在它下降之前产生一种淡入的效果。我希望它从顶部滑下来。我能找到的唯一类似示例与 http://www.sproutcore.com 上的标题类似，但我相信他们使用 CSS3 来实现这种效果。

有没有一种简单的方法可以用 jQuery 的 show() 来完成这个？

感谢阅读！

【问题讨论】：

非常感谢您的回复。我已经分叉了 Bryan Ross 创建的 jsfiddle，以展示我到目前为止所尝试的内容。 jsfiddle.net/ZMGD7 如您所见，高度建议与 jQueryUI 的 .show('drop', {direction: 'up'}) 效果完全相同，它在之前的位置中间略微淡入下拉内容。我还在小提琴上放了一个 slideDown 示例，以表明它提供了不同的效果。有没有办法以任何其他方式向下滑动（即使没有 jQueryUI）？

标签： jquery jquery-ui

【解决方案1】：

如果没有看到您的 HTML/CSS，很难判断那里是否存在问题，但是；

您是否尝试过将标题设置为 display:none。

$('#header').slideDown(1000);

我无法想象 .slideUp() 会给你想要的效果。

您也可以尝试将标题高度设置为 0 并在页面加载时应用：

$('#header').animate({
  height : 100px
},{
  queue : false,
  duration : 1000
});

但这可能会显示标题内部内容的一些时髦问题。

如果您打算使用 .show() + UI，那么幻灯片应该可以工作。

$('#header').show({
  effect : 'slide',
  easing : 'easeOutQuart',
  direction : 'down',
  duration : 1000
});

【讨论】：

【解决方案2】：

看我做的这个例子：http://jsfiddle.net/hFBc8/1/

HTML

<div class="menu">
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>
<div class="sub-menu">
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>

Javascript

var h = $('.sub-menu').height();
$('.sub-menu').css('top', -h);

$('.menu').hover(
    function(){
        $('.sub-menu').animate({top: 0});
    },
    function(){
        $('.sub-menu').animate({top: -h});
    }
);

CSS

.menu li {
    float: left;
    padding: 10px 20px;
}
.menu {
    background: #ffff33;
    overflow: auto;
    z-index: 10;
    position:relative;
}
.sub-menu {
    position: relative;
    top: 0;
}

【讨论】：

【解决方案3】：

看看这是否符合你的要求：http://jsfiddle.net/bryanjamesross/hHmpH/

问题是 slideDown 和 slideUp 动画高度，而不是位置。所以发生的情况是容器的高度变小/变大了，而内容却没有。

slideDown 和 slideUp 真的应该被称为 expandVertical 和 contractVertical（或者可能是 squeeze）。

【讨论】：