Javascript 缩放效果的jQuery UI切换未按预期工作

在我的网站上，（我不能在这里共享URL，您需要登录才能看到），我正确地使用了所需的jQuery UI动画。但当我在localhost中再次测试相同的代码时，它就是不起作用：

我加了小提琴：

如果您尝试使用fiddle，它可以完美地工作，但是当我运行完全相同的代码时，我会看到以下行为：

页面已加载：

单击按钮，钟的大小调整为0并隐藏

再次单击，它将快速调整到100%（无动画），而不是使用动画调整回100%，然后再次调整到0%（有动画），而不是100%。动画刚完成，它就再次调整到100%。所以，它最终显示出来了，但有一些错误/重复，我不明白

以下是第二点的大致“时间线”，以获得想法：

时间-行动

0%-点击

0.1%-图像大小从0%调整到100%（无动画）

0.2%（假设）-图像大小从100%（带动画）调整到0%

99.1%（假设）-图像大小从0%调整到100%（无动画）

100%完成

当您不断单击时，会重复此操作

纠正行为（如在小提琴中发生的行为）：

单击按钮，钟的大小调整为0，并隐藏动画

再次单击，钟的大小将调整为100%，并再次显示动画

PS:

当我编写单独的jQuery（

.show（'scale'，2000）

和

.hide（'scale'，2000）

）时，一切都在运行

编辑1：

当我进一步测试其他效果时，比如

clip

，

drop

，它没有引起任何问题。所以我认为问题在于规模效应

$（文档）.ready（函数（）{
$（文档）。在（“单击”，“按钮”，函数（）上）{
$（“#nbutton.b1”）。切换（“比例”，2000年）；
});
});
按钮{
高度：60px；
宽度：60px；
边界半径：50px；
位置：固定；
右：40px；
底部：30px；
边界：无；
颜色：白色；
盒影：0.10px 0 rgba（0,0,0,0.3）；
光标：指针；
z指数：100；
}
布顿先生{
宽度：60px；
高度：60px；
位置：绝对位置；
}
.b1{
z指数：2；
背景图像：url（'https://test.roadcast.co.in/app/assets/img/bell.png');
背景尺寸：包含；
背景重复：无重复；
}
.b2{
z指数：1；
背景图像：url（'https://test.roadcast.co.in/app/assets/img/bellcross.png');
背景尺寸：包含；
背景重复：无重复；
转换：转换0.400秒轻松度；
变换：旋转（-45度）；
}

单击
您可以使用JQuery
animate（）
和
步骤
或多个
animate（）
如下所示。您需要计算
轻松度
尊重
持续时间

$(document).ready(function(){
  $(document).on("click", "button", function(){
        if($("#nbutton .b1").css('display') =='block')
        {
          var div = $("#nbutton .b1");

          div.animate({height: '60px',width: '60px'}, 200);
          div.animate({height: '0px',width: '0px',margin:'50%'}, 200);
          div.animate({height: '60px',width: '60px',margin:'0%'}, 1600);        
          div.animate({height: '0px',width: '0px',margin:'50%'}, 200);
          div.animate({height: '60px',width: '60px',margin:'0%'},200);
          $("#nbutton .b1").css('display','none'); 
        }
        else
        {
          $("#nbutton .b1").css('display','block');
          div.animate({height: '0px',width: '0px',margin:'50%'}, 1000);

        }
       }); 
});

您使用的是什么浏览器？您是否尝试过其他浏览器？在Chrome Win 10中，它看起来很棒，但我不知道没有jQueryUI时它是什么样子。0.1%的百分比很难辨别…0.1%表示单击后不久。我只是想让你明白“点击后”的意思。进一步的jqueryui是必需的。Firefox中也有同样的行为。这并没有回答我的问题。你可以检查小提琴中的动画，也可以不检查。