如何使用jquery为点击类设置动画？答案

【问题标题】：How to animate a class on click using jquery?如何使用jquery为点击类设置动画？
【发布时间】：2018-01-05 17:41:03
【问题描述】：

我有一个div，我想在单击另一个div 时对其进行动画处理。我知道这可以用 jQuery 轻松完成，但不知何故我无法让它工作。

我已经尝试过SO建议here添加

$('#button').onClick(function(){
$('#target_element').addClass('.animate_class_name');});

但什么也没发生。

这是小提琴https://jsfiddle.net/rdfbcq3j/2/。目标是在按下click_me 时将红色圆圈 div 对象设置为矩形。最好的方法是什么？

【问题讨论】：

标签： jquery html css

【解决方案1】：

你的脚本有语法错误，不需要在addClass()函数的类名前添加.。一个工作小提琴是here 像这样使用

$('#button').on("click",function(){
    $('#target_element').addClass('animate_class_name'); 
});

或者，

$('#button').click(function(){
    $('#target_element').addClass('animate_class_name'); 
});

或者，

$(document).on("click","#button",function(){
    $('#target_element').addClass('animate_class_name'); 
});

【讨论】：

【解决方案2】：

你只是用点拼错了一点。这是工作的jsfiddle：

https://jsfiddle.net/rdfbcq3j/3/

应该是$('.circle').addClass('clicked');，而不是$('circle').addClass('.clicked');

【讨论】：

【解决方案3】：

你没有放'.'从 DOM 中查询 'circle' 元素等等。这是您解决的代码：https://jsfiddle.net/Lsbcc3rz/

$('.click_me').on('click', function() {

    $('.circle').addClass('clicked');
});

【讨论】：

【解决方案4】：

我在弄乱你的代码，出现语法问题，我在点击时删除了 dot。我使用 click() 而不是 onClick。这应该可以解决您的问题。

 $('.circle').addClass('clicked');

Javascript

$('.click_me').click(function(){
    $('.circle').addClass('clicked');
});

HTML

<div class="circle">
</div>

<div class="click_me"> Click Me!
</div>

CSS

  .circle {
      position: absolute;
      width: 10%;
      height: 10%;
      border-radius: 50%;
      background: red;
    }

    .clicked {
      animation: rectangularize 3s ease-in-out infinite;
    }

    .click_me {
      position: absolute;
      width: 10%;
      height: 10%;
      left: 50%;
      background: yellow;
      cursor: pointer;
    }
    @keyframes rectangularize {
      30% {
        border-radius: 0%;
      }
    }

【讨论】：