【问题标题】：CSS animation with jQuery Function has Delay Time带有 jQuery 函数的 CSS 动画具有延迟时间
【发布时间】：2017-04-04 17:46:28
【问题描述】：

我对 CSS 变换动画的点击持续时间和响应速度有疑问。问题是，在第一次点击切换时，动画会响应点击，并且可以中途停止，允许它来回切换。但是，在退出的过程中，也就是第一轮jQuery函数完成后的第二次点击，动画必须达到它的全部持续时间才能再次激活。我怎样才能做到这一点，以便动画在第一次和第二次执行该功能时都响应点击（可以中途取消）？感谢您的帮助，谢谢。

<body>

<div class="wrapper">
<div class="circle1"><li class="products"><a href="#">Products</a></li></div>
</div> 

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<a><img id="ring" src="New Assets/ring5.png" alt=""></a>
</ul>
</div>

</body>

.circle1 {
    width: 80px;
    height: 80px;
    position: relative;
    top: 400px; 
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
    transform: translateY(2000px);
}    
#ring {
    background-size: contain;
    width: 50px;
    position: relative;
    top: 5px;
}

$(document).ready(function() {
    var $circle1 = $('.circle1');
    $('#ring').on("click", function() {
        if ($circle1.css('transform') == 'matrix(1, 0, 0, 1, 0, 2000)') {
            $circle1.css('transform', 'matrix(1, 0, 0, 1, 0, 400)');
        } else {
            $circle1.css('transform','matrix(1, 0, 0, 1, 0, 2000)');
        };
    });
});

【问题讨论】：

您的 HTML 在标签名称和属性之间缺少一些空格，但除此之外它应该可以正常工作。您能否包含完整的 HTML 示例，包括 .circle 元素
是的，我将包括在内。这些是我在此处添加时 HTML 中的一些意外空格。谢谢。

标签： javascript jquery css css-transitions css-transforms

【解决方案1】：

您的代码有效...您可以发送所有文件吗？

用它创建新文件并尝试（这是你的代码）：

<style>
.circle1 {
    width: 80px;
    height: 80px;
    position: relative;
    top: 0px;
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
    transform: translateY(250px);
}

#ring {
    background-size: contain;
    width: 50px;
    position: relative;
    top: 5px;
}
</style>


<a>
    <img id="ring" src="http://i.dailymail.co.uk/i/pix/2015/06/29/12/038FBB710000044D-3143037-image-a-30_1435578285388.jpg" alt="">
</a>
<div class="circle1">
    <ul>
        <liclass="products">
            <ahref="#">Products</a>
        </li>
    </ul>
</div>


<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
 $(document).ready(function() {
  var $circle1 = $('.circle1');
  $('#ring').on("click", function() {

    if ($circle1.css('transform') == 'matrix(1, 0, 0, 1, 0, 250)') {
      $circle1.css('transform', 'matrix(1, 0, 0, 1, 0, 0)');
    }
    else {
      $circle1.css('transform','matrix(1, 0, 0, 1, 0, 250)');
    };
  });
});
</script>

编辑（试试这个）：

$(document).ready(function()
{
  var $circle1 = $('.circle1');
  $('#ring').click(click);

  function click()
  {
    // Get this
    var t = $(this);
    // Disable click event
    $(this).off('click');
    // After 1500ms set reset click
    setTimeout(function(){ t.click(click); }, 1500);

    if($circle1.css('transform') == 'matrix(1, 0, 0, 1, 0, 250)')
    {
      $circle1.css('transform', 'matrix(1, 0, 0, 1, 0, 0)');
    }
    else
    {
      $circle1.css('transform','matrix(1, 0, 0, 1, 0, 250)');
    }
  }
});

【讨论】：

是的，但是请注意，当您第一次单击它并在图片到达顶部之前立即单击它时，它会中途取消动画并返回到其原始位置。但是，如果让图片播放完整动画，然后在返回的途中，动画不能中途取消。
对我来说这是工作，你的导航器是什么？（试一试）
我正在使用谷歌浏览器。
没必要！谢谢，我认为这段代码会等待动画完成，然后再继续下一个功能。但是，有没有一种方法可以毫不拖延地使用切换按钮移动元素？例如，在中途反转动画。再次感谢。
无论如何，我为我的问题找到了另一种解决方案。通过使用 (.open) 类和一些 CSS 调整，我还可以来回切换元素。