Javascript 如何重置JQueryUI效果动画？

我有两个不同的计时器条，每一个都会在5秒钟内关闭。但当我试图停止并重置第一个计时器时，它不会重置，只会从停止的地方继续

期望的行为： 计时器1启动 用户点击键 计时器1在完成一半时停止 计时器2启动 计时器2过期 计时器1重置为100%并启动

这是计时器1的启动方式：

function StartTimer1(){       
 $("#timer-bar").show().width("100%");
    
$("#timer-bar").hide({
            effect: "blind",
            easing: "linear",
            duration: 5000,
            direction: "left",
            complete: function () {
                //do stuff
            }
        });
}

然后当有人按了键，我就跑

 //Stop timer1
     $("#timer-bar").stop(true, false);

//Start timer2 
    $("#answer-timer-bar").hide({
        effect: "blind",
        easing: "linear",
        duration: 5000,
        direction: "left",
        complete: function () {
            //do stuff
        }
    });

然后在timer2过期后，我按了另一个键，再次调用StartTimer1（）。即使我在开始动画之前将宽度重置为100%，它也会从第一次停止的地方继续。我读过关于队列的文章，并认为这是我的答案，但我尝试过在每个计时器选项中添加唯一的队列名称，但无论何时，由于某种原因，计时器都不会启动。当我刚刚将队列设置为true时也是如此。调用Stop（）时，我尝试了clearQueue和jumpToEnd参数的不同选项，但似乎无法获得我想要的行为

任何帮助都将不胜感激。谢谢

jsIDLE:

要重置动画：

// Remove style
$("#timer-bar").removeAttr('style');
// Set initial width
$("#timer-bar").show().width("100%");

或：

使用

.stop（true，true）

获取占位符的外皮（

.stop（[clearQueue][，jumpToEnd]）

）

jumpToEnd

将隐藏它，因此只需再次显示它，并在timer2结束后调用它：

 function StartTimer1() {
  $("#timer1").hide({
    effect: "blind",
    easing: "linear",
    duration: 5000,
    direction: "left",
    complete: function() {}
  });
}

function StopTimer1() {
  $("#timer1").stop(true, true).show();

  $("#timer2").hide({
    effect: "blind",
    easing: "linear",
    duration: 2000,
    direction: "left",
    complete: function() {
      StartTimer1()
    }
  });
}

按下按钮后立即重置红色条的示例：

函数StartTimer1（）{
$（“#timer1”）。隐藏({
效果：“盲”，
放松：“线性”，
持续时间：5000，
方向：“左”，
完成：函数（）{}
});
}
函数StopTimer1（）{
$（“#timer1”）.stop（true，true）.show（）；
$（“#timer2”）。隐藏({
效果：“盲”，
放松：“线性”，
期限：2000年，
方向：“左”，
完成：函数（）{
StartTimer1（）
}
});
}

单击第一个按钮，然后单击第二个按钮，然后再次单击第一个按钮
开始计时器1
停止计时器1和启动计时器2

您可以在开始时设置timer1，并在timer2效果结束时将其重置为初始值：

var initialValue=null；
函数StartTimer1（）{
if（initialValue==null）{
initialValue=$（“#timer1”）.clone（）；
}否则{
$（“#timer1”）。替换为（初始值）；
}
$（“#timer1”）.show（）.width（“100%”）；
$（“#timer1”）。隐藏({
效果：“盲”，
放松：“线性”，
持续时间：5000，
方向：“左”，
完成：函数（）{
}
});
}
函数StopTimer1（）{
$（“#timer1”）.stop（真、假）；
$（“#timer2”）。隐藏({
效果：“盲”，
放松：“线性”，
期限：2000年，
方向：“左”，
完成：函数（）{
StartTimer1（）；
}
});
}

单击第一个按钮，然后单击第二个按钮，然后再次单击第一个按钮
开始计时器1停止计时器1和开始计时器2

隐藏和显示方法上方的动画？
根据我的研究和 如果我们使用

$（选择器）。animate（）

而不是

$（选择器）。hide（）

和

$（选择器）。show（）

，我们将对动画有更多的控制

为动画使用容器元素
我已经分离了css样式，并为动画本身添加了覆盖层，以防止容器崩溃（如果元素为

display:none

，则该元素将没有高度）。这可能有用或无用，这取决于你的目标。您仍然可以隐藏它们，因此使用此方法没有缺点。将动画与容器分离可能很有用

恢复动画的计时问题
如果其中一个计时器在动画过程中恰好停止并恢复，动画仍将具有相同的持续时间以“缩短距离”，从而导致动画速度变慢

但是，如果我们像您在示例中所做的那样重置

计时器1的动画，则这不是问题，但除此之外，我们必须根据动画进度和总动画长度调整动画持续时间（您可以在下面的脚本中看到这一点）

只是为了好玩-显示时间

通常，计时器会显示时间，因此我已将动画的持续时间添加到覆盖上。这只是一个简单的添加，您可能需要添加（加上样式）。动画的持续时间可以通过数据持续时间（毫秒）在计时器元素上设置


$（'document'）.ready（函数（）{
ResetAll（）；
});
函数TimeLeft（id，initialTime）{
常量$timer=$（“#”+id）；
const$overlay=$timer.find（'.overlay'）；
const percentageToGo=（parseInt（$overlay.css（'width'））/parseInt（$timer.css（'width'））；
返回百分比ToGo*初始时间；
}
函数StartTimer（id，onComplete=null）{
常量$timer=$（“#”+id）；
const$overlay=$timer.find（'.overlay'）；
const duration=$timer.data（'duration'）；
常数时间=时间间隔（id，持续时间）；
$overlay.animate({
宽度：“0%”
}, {
持续时间：时间，
“线性”，
步骤：函数（）{
$overlay.html（Math.round（TimeLeft（id，duration））/1000）；
},
完成：函数（）{
//$timer.css（'display'，'none'）；//删除所有注释以完全隐藏timer元素
$overlay.html（“”）；
if（onComplete&&typeof onComplete==='function'）{
onComplete（）；
}
}
});
}
功能停止计时器（id）{
$（'#'+id+'.overlay'）.stop（true，false）；
}
功能重置计时器（id）{
常量$timer=$（“#”+id）；
const$overlay=$timer.find（'.overlay'）；
$overlay.stop（true.css（'width'，'100%'）；
//$timer.css（'display'，'block'）；//删除所有注释以完全隐藏计时器元素
$overlay.html（Math.round（TimeLeft（id，$timer.data（'duration'））/1000）；
}
函数stopTimer1和startTimer2（）{
重置计时器（“计时器1”）；
重置计时器（“计时器2”）；
StartTimer（'timer2'，function（）{
//$（'#timer2'）.css（'display'，'none'）；//删除所有注释以完全隐藏计时器元素
斯塔蒂
 function StartTimer1() {
  $("#timer1").hide({
    effect: "blind",
    easing: "linear",
    duration: 5000,
    direction: "left",
    complete: function() {}
  });
}

function StopTimer1() {
  $("#timer1").stop(true, true).show();

  $("#timer2").hide({
    effect: "blind",
    easing: "linear",
    duration: 2000,
    direction: "left",
    complete: function() {
      StartTimer1()
    }
  });
}