$("#element").click(function() {
  $(this).animate({
    'width': '200px',
    'height': '200px',
    'opacity': 0.5
  }, 500); // 500毫秒的动画持续时间
});

.box {
  width: 100px;
  height: 100px;
  background: blue;
  transition: all 0.5s ease;
}
.box.active {
  width: 200px;
  height: 200px;
  opacity: 0.5;
}

$("#element").click(function() {
  $(this).toggleClass('active');
});

@keyframes grow {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box.animated {
  animation: grow 1s ease;
}

$("#element").click(function() {
  $(this).addClass('animated');
});

// 推荐结合CSS过渡的方式
$(".btn").click(function() {
  const $box = $(".box");
  
  // 移除旧动画类
  $box.removeClass("animate-scale animate-rotate");
  
  // 根据条件添加不同动画
  if(someCondition) {
    $box.addClass("animate-scale");
  } else {
    $box.addClass("animate-rotate");
  }
});

/* 对应的CSS */
.animate-scale {
  transform: scale(1.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-rotate {
  transform: rotate(180deg);
  transition: transform 0.5s ease-in-out;
}