使用jQuery UI的show函数，未达到预期效果

Question

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

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

我也尝试了$('header').show('drop'，{direction：'up'}，1000)，但这会在它下降之前给出一种淡入的效果。我想让它从上面滑下来。我所能找到的唯一类似的例子与http://www.sproutcore.com上的头文件类似，但我相信他们是使用CSS3来实现此效果的。

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

感谢您的阅读！

Answer 1

如果看不到HTML/CSS，就很难判断是否有问题，但是；

你有没有试过把你的标题设置为显示:无。

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

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

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

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

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

如果您设置为使用.show() + UI，那么slide应该可以工作。

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

Answer 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;
}

Answer 3

看看这是否如您所愿：http://jsfiddle.net/bryanjamesross/hHmpH/

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

slideDown和slideUp实际上应该被称为expandVertical和contractVertical (或者可能是squeeze)。