使用动画在视图中延长查询元素的时间

Question

设置：

• 文档有几个复选框
• 离屏div正在收集对复选框所做的更改
• 此div将在更改框
后滑入视图x秒
• 在检查另一个（隐藏前重置时间后）
  将（应该）保持视野x秒

我尝试过队列计数$('.hidden').queue('fx')和位置（如下所示）的变体，但未找到正确的结果。

该框有动画效果。发生了两件不受欢迎的事情。如果div处于视图中，则选中另一个框会使其显示为第一次检查的剩余时间，之后，该框将永远不显示＆amp;隐藏。

显然，我错过了一些关键。请帮助我了解缺少的东西。

Working jsfiddle here

目前正在使用：

$('.futpur,.nowpur').click(function () {
    // In order to stop the queuing events of multiple selections
    if (hidden.queue('fx').length)
        hidden.stop(true,true);

    // If hidden, show
    if (hidden.position().left < -4)
       hidden.delay(1000)
             .animate({"left":"-4px"}, 1000)    // fully in view
             .addClass("visible")
             .delay(5000)
             .animate({"left":"-260px"}, 1000)  // hidden off left side
             .removeClass("visible");
    // otherwise, delay the hiding
    else
        hidden.delay(5000)
              .animate({"left":"-260px"}, 1000)
              .removeClass("visible");
});