Javascript 在第一次跑步时，轻松进退变得即时？_Javascript_Html_Css

Javascript 在第一次跑步时，轻松进退变得即时？

javascript html css

Javascript 在第一次跑步时，轻松进退变得即时？,javascript,html,css,Javascript,Html,Css,我有一段代码，它不是让图像轻松进出，而是即时显示它们但它似乎没有这样做它马上就出现了为什么? 网页设计 .功能读取模式{ 位置：相对位置；溢出：隐藏；过渡：最大高度21s缓进缓出； } $（'.js feature'）。每个（函数（））{ var self=$（这是）； var起始位置； var totalFeatures=self.children（）.length； var maxHeightBuffer=500；函数getMaxHeight（）{ var maxHeight=0

我有一段代码，它不是让图像轻松进出，而是即时显示它们

但它似乎没有这样做它马上就出现了

为什么?


网页设计
.功能读取模式{
位置：相对位置；
溢出：隐藏；
过渡：最大高度21s缓进缓出；
}
$（'.js feature'）。每个（函数（））{
var self=$（这是）；
var起始位置；
var totalFeatures=self.children（）.length；
var maxHeightBuffer=500；
函数getMaxHeight（）{
var maxHeight=0；
对于（变量i=0；i


该函数调用expand，然后更新转换应轻松输入输出到的maxHeight值。这仅在is执行一次后有效。第一次执行时不会放松，但会进入最大高度瞬间？为什么？
1）您的.features读取模式的样式
没有关闭}
。2） 您的脚本未完成关闭。修复了未完成的错误
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<style>
.features-read-mode {
    position: relative;
    overflow: hidden;
    transition: max-height 21s ease-in-out;
    }
</style>

 <script>
 $('.js-feature').each(function()) {
    var self = $(this);
    var startPosition;
    var totalFeatures = self.children().length;
    var maxHeightBuffer = 500;

     function getMaxHeight() {
     var maxHeight = 0;
     for (var i = 0; i < totalFeatures; i++)
     {
         maxHeight += self.children().eq(i),height();
     }
     maxHeight += maxHeightBuffer;
     return maxHeight;
    }

    function expand() {
        setTimeOut(function() {
            self.css('max-height', getMaxHeight() + 'px');
        }, 1);
    }

    function collapse(startPos) {
        self.css('max-height', startPos + 'px');
    }

      self.find('.js-button-expand-collapse').on('click', function() {
      collapse(startPosition);

    } else {
      startPosition = self.height();
      self.addClass('features-read-more--expanded');
      expand();
    }
  });
 }
    </script>
</html>