javascript - jQuery SlideToggle 方法但不基于元素的高度

Question

单击标题后，使用 jQuery slideToggle 方法显示一些内容：

$(".main-section .main-section-title").click(function() {
  $(this)
    .parent()
    .next(".content")
    .slideToggle(500, "linear");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='main-section'>
  <div class='main-section-title'>
    Title1
  </div>
</div>
<div class='content t1' style='height:30px;background-color:green;'>
</div>

<div class='main-section'>
  <div class='main-section-title'>
    Title2
  </div>
</div>
<div class='content' style='height:100px;background-color:blue;'>
</div>

这是一个单页网站，因此页面上有多个这些标题和内容元素。因为jQuery的slideToggle方法动画速度是基于元素的高度，所以动画都有不同的slideUp和slide down速度。是否有使用 jQuery 幻灯片方法的解决方案，但无论元素的高度如何，速度都是恒定的。比如在 1000 毫秒内向下滑动 100 像素？

标签： javascriptjquery

Answer 1

检查下面的代码。我在评论中添加了解释。

$(".main-section .main-section-title").click(function() {
  let contentDiv = $(this).parent().next('.content');
  // define constant time based on your requirement
  // if you want to slide 100px per second then use (1000/100)
  // 1000(millisecond) is constant that is for one second.
  // get total slide time = div height * 1000 / slidePixelPerSecond
  // below I have used 1000/10 so it will slide 10px per second.
  let time = contentDiv.outerHeight() * 1000 / 10;
  contentDiv.slideToggle(time, 'linear');
});

.t1 {
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='main-section'>
  <div class='main-section-title'>
    Title1
  </div>
</div>
<div class='content t1' style='background-color:green;'>
</div>

<div class='main-section'>
  <div class='main-section-title'>
    Title2
  </div>
</div>
<div class='content' style='height:100px;background-color:blue;'>
</div>