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

【问题标题】：Implementing a slide animation in jQuery Mobile triggered by various events在jQuery Mobile中实现由各种事件触发的幻灯片动画
【发布时间】：2013-05-06 09:54:23
【问题描述】：

我已经用下面的 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();

这很好用，但它只是出现和消失。有谁知道如何使用幻灯片过渡动画让它滑入和滑出？

【问题讨论】：

是的，我愿意。非常感谢。如果您想将其作为答案，我当然会接受。
如果你想看看，我用另一个选项更新了我的答案。

标签： javascript jquery-mobile animation transition slide

【解决方案1】：

您可以使用SlideUp 和slideDown 来获得您想要的效果。

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

例如：-

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

如果你想在动作之间有一个延迟，你可以使用 delay(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);

});

【讨论】：