jQuery toggleClass - 缓动不起作用

Question

我在使用 toggleClass 的缓动属性时遇到问题。我在这个网站和其他网站上搜索过，但仍然无法按预期工作。 class 切换得很好，但它不能平滑地缓入或缓出。

这是我的代码示例：DEMO

这是我在我的项目中加载的（所有）脚本：

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

我偷偷怀疑它与我正在加载（或者可能没有加载？）的脚本有关，因为我已经多次检查代码并将其直接与 jQuery 文档进行比较.我也是 jQuery.

的新手

我想要完成的是类似于翻盖效果的东西。在页面加载时，<div> 根据从数据库中获取的值显示或隐藏，复选框用于切换 <div> 打开或关闭。

Answer 1

在您的演示代码中我更改了：

.hideMe { display:none; }

到

.hideMe { opacity: 0; }

这适用于缓动效果，但这会产生一个问题，即元素刚好占用 space。它不是超级优雅，但我在这里通过使用第二个 'removeMe' class 在这里为您解决了那个问题：

https://jsfiddle.net/je7d9wgr/

奖金：

或者使用 slideToggle()，例如：https://jsfiddle.net/gL0vnhc2/

奖金2：

此代码检查复选框的当前状态，然后根据值有条件地设置动画：

https://jsfiddle.net/fuzduh5g/

Answer 2

这也可以使用 css transitions 完成，不需要 jquery 缓动效果

下面是一个简单的演示。

CSS

.hideMe {
 height:0px !important;
 border:none !important;
 overflow:hidden;
}

 #create-login-group {
  -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

JS

$( "#create-login-button" ).change(function() {
   $('#create-login-group').toggleClass("hideMe", 100);        
});

工作JS Fiddle

工作片段

$(function(){
$( "#create-login-button" ).change(function() {
 $('#create-login-group').toggleClass("hideMe", 100);        
 });
});

.hideMe {
  height:0px !important;
  border:none !important;
  overflow:hidden;
}

#create-login-group {
    -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hideMe">
  Some text is here
</div>
<div>
  more content
</div>

Answer 3

如果您想使用 toggleClass 选项，这有点棘手，但会奏效。

添加另一个负责 "display: none" 的 class，并在实际动画 class 之后或之前切换它。

var lGroupEle = $('#create-login-group');
$("#create-login-button").change(function() {
  if ($(lGroupEle).hasClass("hidden")) {
    $(lGroupEle).toggleClass("hidden");
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad");
  } else {
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad", function() {
      $(lGroupEle).toggleClass("hidden");
    });
  }
});

.hideMe {
  opacity: 0;
}
.hidden {
  display: none;
}
#create-login-group {
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hidden hideMe">
  Some text is here
</div>
<div>
  more content
</div>

或 fiddle 如果您愿意 - https://jsfiddle.net/63o92nms/1/

jQuery toggleClass - 缓动不起作用

jQuery toggleClass - easing isn't working

jquery

toggleclass