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

前任：-

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

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

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

演示

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

演示2

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

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

});