更改类时如何添加淡入淡出效果？ [复制]答案

【问题标题】：How to add a fade effect when changing classes? [duplicate]更改类时如何添加淡入淡出效果？ [复制]
【发布时间】：2017-02-12 20:15:43
【问题描述】：

我不知道如何在更改类时添加动画效果。

这是我的代码：

$("#a-button").click(function() {
    $("#a-div").toggleClass("hidden show");
});

这可行，但在更改类时没有任何效果。我想让它更平滑，也许像淡入淡出。我该怎么做？

【问题讨论】：

你用谷歌搜索过“jQuery 淡入淡出”吗？因为他们有专门的方法。此外，您可以通过将 css 转换添加到元素来执行此操作。
我知道，但我无法让它与更改交互。好像坏了
那么至少你应该发布你尝试的代码。
.fadeIn('slow') 在那里没有意义。不要只是把意大利面扔在墙上。
"You probably forgot to give a-div a transition."

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以使用 fadeOut()/fadeIn() 和 hasClass() 条件来检查 div 是否具有特定的类：

$('.show_hide').click(function() 
{
  if($('#target').hasClass('show'))
    $('#target').fadeOut('normal');
  else
    $('#target').fadeIn('normal');
    
  $('#target').toggleClass("hidden show");
});

#target {
  background: green;
  margin-bottom:15px;
  height:150px;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show_hide">Show / Hide</button>
<div id="target" class='show'></div>

【讨论】：

见THISjsfiddle。
我看到@RazvanZamfir .. 而不是addClass/removeClass 我更喜欢使用toggleClass() 而不是:visible 最好检查类IMO。很高兴我能帮上忙。编码愉快。

【解决方案2】：

试试这个，让我知道。它是 jQuery 的 fadeToggle。

$("#a-button").click( 
  function() {
    $("#a-div").fadeToggle();
  });

【讨论】：