Question

在我的网站上，（我无法在此处共享网址，您需要登录才能查看），我正确使用了我所需的jQuery UI动画。但是当我在localhost中再次测试相同的代码时，它只是不起作用：

我添加了小提琴：

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

页面已加载：

点击按钮，铃声调整为0并隐藏。
再次点击，而不是通过动画调整回100％，它会快速调整为100％（没有animantion），然后再次调整为0％（使用animantion）而不是100％。在动画之后，它再次调整为100％。所以，它最终显示出来，但是我不明白有些错误/重复。

这里是约。＆＃39;时间表＆＃39;获得一个想法的第二点：

时间 - 行动

0％ - 点击

0.1％ - 图像从0％调整为100％（无动画）;

0.2％（比如） - 图像从100％调整为0％（带动画）;

99.1％（比如） - 图像从0％（无动画）调整为100％;

100％ - 完成

当您一直点击时，这会重复。

纠正行为（如小提琴中所发生的那样）：

点击按钮，铃声调整为0并隐藏animantion。
再次点击，铃声调整为100％并再次显示动画。

PS：

当我编写单独的jQuery（.show('scale', 2000)和.hide('scale', 2000)）时，事情随处可见。

编辑1：

当我使用clip，drop等其他效果进行进一步测试时，它没有引起任何问题。所以我认为问题在于scale效果

＆＃13;

$(document).ready(function(){
  $(document).on("click", "button", function(){
    $("#nbutton .b1").toggle("scale", 2000);
   });
});

＆＃13;

  #nbutton{
            height: 60px;
            width: 60px;
            border-radius: 50px;
            position: fixed;
            right: 40px;
            bottom: 30px;
            border: none;
            color: white;
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
            cursor: pointer;
            z-index: 100;
        }
        .nbutton{
            width: 60px;
            height: 60px;
            position: absolute;
        }
        .b1{
            z-index: 2;
            background-image: url('https://test.roadcast.co.in/app/assets/img/bell.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
        .b2{
            z-index: 1;
            background-image: url('https://test.roadcast.co.in/app/assets/img/bellcross.png');
            background-size: contain;
            background-repeat: no-repeat;
            transition: transform 0.400s ease;
            transform: rotateZ(-45deg);
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="nbutton">
    <div style="position: relative">
        <div class="nbutton b1">
        </div>
        <div class="nbutton b2">
        </div>
    </div>
</div>
<button>Click</button>

＆＃13;

Answer 1

您可以将JQuery animate()与step或多个animate()一起使用，如下所示：您需要计算ease对duration的尊重。< / p>

$(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);

        }
       }); 
});

用于缩放效果的jQuery UI切换不能按预期工作

1 个答案: