Question

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

这是我的代码：

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

这有效，但在更改类时它没有任何效果。我想让它更流畅，也许就像淡入淡出一样。我怎么能这样做？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个并告诉我。它是jQuery的fadeToggle。

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

如何在更改课程时添加淡入淡出效果？

2 个答案: