Question

我已经使用下面的Html实现了一个jQuery移动页脚导航。

<div data-role="navbar" id="footer-nav">
    <ul>
        <li><a id="nav1" href="">Nav 1</a></li>
        <li><a id="nav2" href="">Nav 2</a></li>
    </ul>
</div>

我已将其设置为使各种事件显示并使用以下代码隐藏它：

$("#footer-nav").show();
$("#footer-nav").hide();

这很有效，但它只是出现并消失。有没有人知道如何使用幻灯片过渡动画来滑入和滑出？

Answer 1

您可以使用SlideUp和slideDown来获得所需的效果。

这里我在slideDown动画的complete回调中制作div slideUp，以便在slideDown动画完成后执行。

例如： -

$("#footer-nav").slideDown(1000, function(){
   $(this).slideUp(1000);
});

如果你想在行动之间有延迟，你可以使用延迟（1000）。

$("#footer-nav").slideDown(1000, function(){
   $(this).delay(1000).slideUp(1000);
});

Demo

使用.show()和。hide() ui效果可以实现此目的。

Demo2

$('#footer-nav').show("slide", {
    direction: "up"
}, 1000, function () {

    $(this).delay(1000).hide("slide", {
        direction: "up"
    }, 1000);

});

在各种事件触发的jQuery Mobile中实现幻灯片动画

1 个答案:

Demo2