Jquery 崩塌过渡

我正在做一个定制的折叠器，但我不知道如何在隐藏时进行转换
在网上搜索时，我发现“display:none；”，但它不支持转换
我试过做高度：自动；然后高度：0px；但它也不支持转换

代码如下：

HTML

<a class="clp" href="#clp-1"><div>Button</div></a>
<div class="clp-body clp-show" id="clp-1">Lorem ipsum</div>

JS（jQuery）

---

这里有一个链接：

为什么不使用Jquery的淡入淡出或滑动动画，您可以使用动画功能制作自己的动画

褪色：

幻灯片：

 $('div'+(value)).slideUp();
 $('div'+(value)).slideDown();

要创建自己的动画，请执行以下操作：

  $('div' + (value)).animate({
      //some css propeties example:
      margin-right: 500px
  }, 5000, function() {
    // Animation complete.
  });

---

为什么不使用Jquery的淡入淡出或滑动动画，您可以使用动画功能制作自己的动画

褪色：

幻灯片：

 $('div'+(value)).slideUp();
 $('div'+(value)).slideDown();

要创建自己的动画，请执行以下操作：

  $('div' + (value)).animate({
      //some css propeties example:
      margin-right: 500px
  }, 5000, function() {
    // Animation complete.
  });

---

使用这些类属性可能是它的工作

.clp show{
不透明度：1；
高度：自动；
溢出：可见；
}
·中电展览{
不透明度：0；
身高：0；
溢出：隐藏；
}

使用这些类属性可能是它的工作

.clp show{
不透明度：1；
高度：自动；
溢出：可见；
}
·中电展览{
不透明度：0；
身高：0；
溢出：隐藏；
}

在

height

属性上使用CSS动画

div #hidingDiv {
    height: 50px
    width: 50px
}
@keyframes shrinkup {
    from {
        height: 50px
    }
    to {
        height: 0px
    }

当您希望它消失时：

document.getElementById("hidingDiv").setAttribute("style", "animation-name: shrinkup; animation-duration: 5s")

---

运行JavaScript代码时，这只需在

div

上设置动画。

在

height

属性上使用CSS动画

div #hidingDiv {
    height: 50px
    width: 50px
}
@keyframes shrinkup {
    from {
        height: 50px
    }
    to {
        height: 0px
    }

当您希望它消失时：

document.getElementById("hidingDiv").setAttribute("style", "animation-name: shrinkup; animation-duration: 5s")

---

这只需在运行JavaScript代码时在

div

上设置动画。

您可以使用jQuery设置css属性的动画

$('a.clp').click(function() {
    var value = $(this).attr("href");
    var targetDiv = $('div' + (value));
    targetDiv.toggleClass('clp-show');
    if (targetDiv.hasClass('clp-show')) {
       targetDiv.css('display', 'block');
       targetDiv.animate({
         opacity: 1
       }, 500);

    } else {
       targetDiv.animate({
         opacity: 0
       }, 500, function() {
         // This will be executed when the animation is complete
         targetDiv.css('display', 'none');
       });
    }
});

这里有一个更新的。我也对CSS做了一些修改。通过这种方式，我们可以确保它的动画效果良好，然后在过渡完成后消失。否则，它可能会阻止某些鼠标事件并影响其他元素

更新

下面是用于折叠（）的jQuery：

---

您不需要在这里切换类，但我保留了它，以防您想要更改其他CSS属性。

您可以使用jQuery设置CSS属性的动画

$('a.clp').click(function() {
    var value = $(this).attr("href");
    var targetDiv = $('div' + (value));
    targetDiv.toggleClass('clp-show');
    if (targetDiv.hasClass('clp-show')) {
       targetDiv.css('display', 'block');
       targetDiv.animate({
         opacity: 1
       }, 500);

    } else {
       targetDiv.animate({
         opacity: 0
       }, 500, function() {
         // This will be executed when the animation is complete
         targetDiv.css('display', 'none');
       });
    }
});

这里有一个更新的。我也对CSS做了一些修改。通过这种方式，我们可以确保它的动画效果良好，然后在过渡完成后消失。否则，它可能会阻止某些鼠标事件并影响其他元素

更新

下面是用于折叠（）的jQuery：

---

您不需要在此处切换类，但我保留了它，以防您想要更改其他CSS属性。

转换对高度不起作用，您需要使用最大高度。使用下面的CSS

.clp-body {
    max-height: 0; /* set the initial height to 0 */
    transition: max-height .5s ease-in; /* define the transition */
}
.clp-show {
    max-height: 1000px; /* set it to some high value but it will not expand more than the content height */
}

点击

.clp

$(".clp").on("click", function () {
    $(".clp-body").toggleClass("clp-show");
});

编辑：

---

您不需要

显示：无

，因为我们正在设置

最大高度：0

最初

转换对高度不起作用，您需要使用最大高度。使用下面的CSS

.clp-body {
    max-height: 0; /* set the initial height to 0 */
    transition: max-height .5s ease-in; /* define the transition */
}
.clp-show {
    max-height: 1000px; /* set it to some high value but it will not expand more than the content height */
}

点击

.clp

$(".clp").on("click", function () {
    $(".clp-body").toggleClass("clp-show");
});

编辑： 您不需要

display:none

，因为我们正在设置

max height:0

初始值

您可以使用jQuery的and来展开和折叠div，如下所示：

$('#clp-1').slideDown(); // expand
$('#clp-1').slideUp(); // collapse

您还需要删除CSS行

transition:all 0.5s ease以使jQuery滑动正常工作
 您可以使用jQuery的and来展开和折叠div，如下所示：

$('#clp-1').slideDown(); // expand
$('#clp-1').slideUp(); // collapse

.slideToggle()

您还需要删除CSS行
transition:all 0.5s ease以使jQuery滑动正常工作

.slideToggle()

它结合了：
.toggle（）
+
.slideUp（）
+
.slideDown（）

它结合了：
.toggle（）
+
.slideUp（）
+
.slideDown（）
您想要什么类型的转换？您可能正在寻找jQuery的slideUp（）和slideDown（）函数。文档。@JosephBeard我也试过了，但它有一个奇怪的行为，看起来奇怪的行为是由CSS转换与slideUp或slideDown一起使用引起的。如果移除
转换：所有0.5s轻松从CSS中，滑动操作正常。@JosephBeard好的，谢谢！：）@JosephBeard将您的评论添加为答案，以便我可以将其标记为有效的解决方案您想要什么类型的转换？您可能正在寻找jQuery的slideUp（）和slideDown（）函数。文档。@JosephBeard我也试过了，但它有一个奇怪的行为，看起来奇怪的行为是由CSS转换与slideUp或slideDown一起使用引起的。如果移除
转换：所有0.5s轻松从CSS中，滑动操作正常。@JosephBeard好的，谢谢！：）@JosephBeard将您的评论添加为答案，以便我可以将其标记为有效的解决方案我不想使用静态高度，这就是问题所在：/I不想使用静态高度，这就是问题所在：/Ok，这很好，但您知道如何使用“折叠动画”吗？不要使用不透明度，而是使用高度。另外，请考虑代码笔中的css更改。好的，那很好，但是你知道如何使用“折叠动画”吗？不要使用不透明度，而是使用诸如高度之类的内容。另外，请考虑代码笔中的css更改。您何时将
slideUp（）
&
slideDown（）
？检查我的答案，它会给你最理想的方式来实现你的行为。如果您真的想使用jQuery，那么请分别使用
$.toggle（）
而不是
slideUp（）
&
slideDown（）
。理想的方法是使用CSW切换类和转换，何时将
slideUp（）
&
slideDown（）
？检查我的答案，它会给你最理想的方式来实现你的行为。如果您真的想使用jQuery，那么请分别使用
$.toggle（）
而不是
slideUp（）
&
slideDown（）
。理想情况是使用CSS切换类和转换