编辑（试试这个）：

Question

我对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)');
        };
    });
});

Answer 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)');
    }
  }
});

使用jQuery函数的CSS动画具有延迟时间

1 个答案:

编辑（试试这个）：