Question

当我点击另一个div时，我想要动画div。我知道这可以通过jQuery轻松完成，但不知怎的，我无法让它工作。

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

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

但没有发生任何事。

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

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

Answer 2

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

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

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

Answer 3

我正在搞乱您的代码并且存在语法问题，我在点击时删除了点。我使用 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%;
      }
    }

Answer 4

你没有把'。'从DOM查询'circle'元素，依此类推。以下是您解决的代码：https://jsfiddle.net/Lsbcc3rz/

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

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

如何使用jquery为点击动画一个动画？

4 个答案: