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

Posted 2023-05-08

【中文标题】更改类时如何添加淡入淡出效果？ [复制]

【英文标题】：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."

【参考方案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();
  );