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

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回调中制作divlideUp，以便在slideDown动画完成后执行。

例如:-

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

如果您想在操作之间有延迟，可以在两者之间使用delay(1000)。

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

Demo

另一种方法是使用.show()来做到这一点和 。 hide()用户界面效果。

Demo2

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

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

});