jQuery animate show stop hide combination

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

更新!!

对不起Aswin，不知何故它有效但现在却没有： - ）

请检查此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();
  });  
});