Question

我正在尝试使用速度/平滑动画扩展div。现在div随着突然变化而扩展，我的要求是在扩展时提供平滑的动画。

小提琴代码：

http://jsfiddle.net/Sharan_thethy/pnjpj3uo/3/

$('.click1').find('a[href="#"]').on('click', function (e) {
  e.preventDefault();
  this.expand = !this.expand;
  $(this).text(this.expand ? "Hide Content" : "Read More");
  $(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc');
});

Answer 1

这是现代浏览器的css解决方案。（IE10及更高版本）

document.querySelector('a').addEventListener('click', function() {
  document.querySelector('.smalldesc').classList.toggle('expand');
});

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all .3s ease;
}

.smalldesc.expand {
  max-height: 250px;
}

<div class="service-1 click1">
  <div class="row">
    <div class="medium-12 small-12 columns smalldesc">
      <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <a href="#">Read More</a>
  </div>
</div>

或者，更好的是，仅使用css：

#expend {
  display:none;  
}

#expend + .smalldesc {
  max-height:52px;
  overflow:hidden;
  transition:all .3s ease;
}

#expend:checked + .smalldesc {
  max-height:250px;  
}

label {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

label:hover {
  text-decoration:none;  
}

<div class="service-1 click1">
<div class="row">
  <input type="checkbox" id="expend" />
  <div class="medium-12 small-12 columns smalldesc">
  <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <label for="expend">Read More</label>
</div>
</div>

更新：关于max-height的好处是你不知道确切的高度。如果元素的高度小于max-height属性的值，则元素仍将获得正确的高度。 max-height属性只是限制从顶部开始的高度。

请记住，您不能仅将max-height设置为10000px。我的意思是，你可以，但你不应该。

动画将如此之快后点击链接。
目前max-height为10000px。当您再次点击时，您无法看到toggle的效果，直到它小于div的高度。换句话说，点击后，任何时候都不会发生任何事情。

示例：

document.querySelector('a').addEventListener('click', function() {
  document.querySelector('.smalldesc').classList.toggle('expand');
});

.smalldesc {
  max-height: 52px;
  overflow: hidden;
  transition: all 1s ease;
}

.smalldesc.expand {
  max-height: 10000px;
}

<div class="service-1 click1">
  <div class="row">
    <div class="medium-12 small-12 columns smalldesc">

      <p class="font16 ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <a href="#">Read More</a>
  </div>
</div>

因此，将max-height的值设置为最高元素即可。如果差距不是太大，你就不会感到有问题。

Answer 2

我认为您要找的是将切换处理程序更改为fadeIn()或fadeOut()。

在括号中，定义转换的时间（默认为ms）。

这是处理元素。要处理类，你的小提琴代码可能适用于一些css3转换，尽管由于浏览器兼容性可能不是最佳实践：

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;

Answer 3

您正在寻找的可能是JQueryUI ToggleClass API中定义的“缓动”参数：

http://api.jqueryui.com/toggleClass/

您还可以使用切换类指定持续时间。这应该是你正在寻找的。

编辑：此方法需要加载JQuery UI ...

我更新了你的小提琴添加JQuery UI和一个额外的参数toggleClass：https://jsfiddle.net/pnjpj3uo/13/

$('.click1').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Hide Content":"Read More");
$(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc', 1000, 'swing');});

Answer 4

我有一些解决方案，但是在这种情况下你不能将hieght设置为auto，你可以执行以下操作，用这些替换你的jquery代码： -

$('.click1').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Hide Content":"Read More");

    $(this).closest('.click1').find('.smalldesc, .bigdesc').animate({
        "height": "400px"
    }, "slow");  
});

它可能对你有帮助。

Answer 5

CSS规范没有定义将元素的高度或宽度从绝对值设置为auto的方法。这是因为浏览器在进行扩展动画时不能轻易/便宜地以数学方式计算auto的实际值。

涉及auto的大多数扩展或收缩动画都依赖于Javascript。他们所做的是将高度或宽度设置为auto，然后获取新的元素高度并使用获得的值应用动画。

我已经更新了你的jsfiddle以显示我告诉你的内容。 http://jsfiddle.net/pnjpj3uo/14/

单击并使用平滑动画展开div

5 个答案: