Question

我已经阅读了多个关于此的问题，但实际上没有一个答案对我有用。

我试图从jquery添加像fadein / fadeout或slideup / sliddown这样的效果到toggleClass（）功能，但我无法弄清楚如何。有人知道怎么做吗？

添加：

transition: 1s;

上课对我来说没有用，它只会立即出现。

类别：

.hide{
    display: none;
    transition: 1s;
}

我该如何解决这个问题？

谢谢！

Answer 1

使用此

toggleClass( class, [duration] )

Answer 2

由于display属性只有2个状态，因此无法进行淡入淡出过渡。

尝试

.hide{
    opacity:0;
    transition: opacity 0.5s linear;
}

.show{
    opacity:1;
}

Answer 3

使用jquery toggleClass（）/ slideToggle本身有一个选项!!

<强> HTML

<p class="targetid">test content</p>
<button>Click</button>

<强>脚本

$(document).ready(function () {
$("button").on("click", function () {
    $( ".targetid" ).slideToggle( "slow" );
});

}）;

Fiddle Demo

Answer 4

而不是display: none;使用height: 0px;，而是在课程中您要切换放置height: __px;。

将__替换为div的高度。这将添加幻灯片效果。

jsFiddle

Answer 5

如果您要比较fadeOut/In，则必须使用不透明的属性，例如opacity＆amp;可视性。

<强> HTML

<button id="toggle">Show / Hide</button>
<div class="see-me show"></div>

<强> CSS

#toggle {
  margin:25px;
}

.see-me  {
  width:150px;
  height:150px;
  background-color: #663399;
  margin: 25px;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

.see-me.show {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

<强> JQ

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.see-me').toggleClass('show');
  });
});

Codepen Demo

添加效果到jquery toggleclass（）

5 个答案: