强制执行jQuery UI转换的顺序

我正在使用Twitter引导程序和Ace Admin模板在网站上工作。下拉菜单是使用无序列表实现的，其中每个列表项都是下拉列表中的元素。强制执行jQuery UI转换的顺序

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

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

出于某种原因，上述第一种情况正常，但第二种情况下，通知列表在细节出现之前开始显示做被隐藏，导致父容器得到尽可能暂时都高可见

这里是我有代码：

$(".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动作开始之前没有完成？

来源

2014-02-10 B Sharp

是不是有理由在'.hide（）'块中放置'$（“。notification-item”）。show（...）'？ – royhowie

是的，它是在.hide完成时应该调用的回调函数中。函数声明位于上面一行的末尾。 –

我知道，但那不是必要的。如果有的话，只要做'setTimeout（function（）{$（“。notification-item”）。show（“slide”，{direction：“left”}，250）}，250）;'如果你想确定它在另一个之后开始。 – royhowie

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

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

a setTimeout()调用。

来源

2014-02-10 18:46:31 royhowie

强制执行jQuery UI转换的顺序

回答

相关问题