jQuery animate show stop hide组合

Question

我有一个div类“已保存”，实际上是一个通知div（见图像链接）

首先，它位于position: fixed; top: -50px;

每当我更改复选框或输入类型颜色时，我想显示“已保存”div，1秒后我想用以下代码隐藏我实现的div。效果很好。

$("input[type=checkbox], input[type=color]").on("change", function() { 
    $(".saved")
    .animate({ top: "10px" })
    .delay(1000)
    .animate({ top: "-50px" });     
});

但是，当我单击一个复选框10次时，div将显示10次。我连续10次看动画。它上下，上下，上下等。

我如何才能认识到它必须做10次？

我尝试了一个.stop()但是没有用。

谢谢！

Answer 1

UPDATE！

对不起阿斯温，不知何故它工作但现在它没有:-)

请检查这个jsFiddle

---

更新2 !!

这有效！

查看更新的jsFiddle

$("input[type=checkbox], input[type=color]").on("change", function() { 
    $(".saved").clearQueue();
    $(".saved").stop();
    $(".saved")
    .animate({ top: "10px" })
    .delay(1000)
    .animate({ top: "-50px" });   
});

Answer 2

为我工作，检查这个https://jsfiddle.net/mkctb7kx/3/

$("input[type=checkbox]").on("change", function() {
  $(".saved").animate({top: "10px"})
  $(".saved").delay(1000).animate({top: "-50px"}, function() {
    $(".saved").clearQueue();
  });  
});