Question

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

到目前为止，我已经尝试过$（'header'）。slideUp（1000）这样可以产生画布的效果，但标题中的元素是静态的。

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

使用jQuery的show（）有没有一种简单的方法来实现这个目的？

感谢阅读！

Answer 1

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

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

$('#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
});

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）。

使用jQuery UI的show函数，没有获得所需的效果

3 个答案: