Question

我正在使用Twitter引导程序和Ace管理员模板工作。下拉菜单使用无序列表实现，其中每个列表项都是下拉列表中的元素。

我的用户要求是下拉列表显示通知列表，当点击通知时，通知列表将会滑落，点击通知的详细信息将滑入到位。我将所有内容实现为列表项，并使用jquery-ui的hide和show函数来设置转换动画。

基本流程应该是：用户点击通知 - ＆gt;通知列表已隐藏 - ＆gt;显示通知详细信息。用户点击“返回详细信息 - ＆gt;隐藏通知详细信息 - ＆gt;显示通知列表。

出于某种原因，上面的第一个场景工作正常，但在第二个场景中，通知列表在隐藏细节之前开始显示，这导致父容器暂时变高，因为两者都可见。

以下是我的代码：

$(".notification-item").click(function (e) {
    e.stopPropagation();
    var guid = $(e.target).closest("li").attr("data-guid");

    $(".notification-item").hide("slide", { direction: "left" }, 250, function () {
        // This is called when hiding is complete
        // show the back button and detail for the correct notification
        $("#notificationsBack").add("li#" + guid).show("slide", { direction: "right" }, 250);              
    });
});

$("#notificationsBack").click(function (e) {
    e.stopPropagation();
    $(".notification-detail").hide("slide", { direction: "right" }, 250, function () {
        // this functions should run after the hide is complete, but appears to start immediately
        $(".notification-item").show("slide", { direction: "left" }, 250);
    });
});

我posted a video of how this looks（动画速度减慢以提高可见度）。

知道为什么在第二次转换中隐藏动作在show动作开始之前没有完成？

Answer 1

您需要强制.show()事件发生在另一个事件之后。最简单的方法是：

$("#notificationsBack").click(function (e) {
    e.stopPropagation();
    $(".notification-detail").hide("slide", { direction: "right" }, 250);
    setTimeout(function(){
        $(".notification-item").show("slide", { direction: "left" }, 250);
    }, 250);
});

setTimeout()来电。

执行jQuery UI转换的顺序

1 个答案: