Question

我无法使toggleClass的缓动属性生效。我在这个网站和其他网站上搜索过，但仍无法按预期工作。课程正在顺利进行，但不能顺利进出。

以下是我的代码示例：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; }

这适用于缓动效果，但这会产生元素占用空间的问题。这不是超级优雅，但我在这里通过使用第二个'removeMe'课程解决了问题：

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

使用代码段

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

如果你想使用toggleClass选项，这有点棘手，但可行。

添加另一个负责“display：none”的类，并在实际动画类之后或之前切换它。

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>

如果你愿意，可以使用

或小提琴 - https://jsfiddle.net/63o92nms/1/

jQuery toggleClass - 缓动不起作用

3 个答案: