javascript - 自动动画滚动到溢出其容器的元素的右侧？

Question

我有一组在包含 div ( ) 内淡入淡出的元素（一个接一个.info）。一些元素在出现时会留在容器内，而另一些元素会溢出容器，这不是首选。

当这种情况发生时，我想应用某种水平/自动滚动效果，这样它就可以显示溢出文本元素的开始到结束，同时仍然保留在一行上。有什么办法可以用 JQuery 完成这个吗？

这是我迄今为止取得的进展的一个片段：

(function() {
  var tab = $(".info .tab");
  var tabIndex = -1;

  function showNextTab() {
    ++tabIndex;
    tab
      .eq(tabIndex % tab.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextTab);
  }
  showNextTab();
})();

.info {
  background: skyblue;
  display: inline-block;
  line-height: 1;
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
}

.info .tab {
  display: none;
}

h2.tab {
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
  <h2 class="tab">This is the first line.</h2>
  <h2 class="tab">This is the second line.</h2>
  <h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
  <h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>

更新：添加了滚动效果/仍在排除故障

这是一个更新的片段，应用了最近的建议：

var myVar = "";

(function() {
  var tab = $(".info .tab");
  var tabIndex = -1;

  function showNextTab() {
    ++tabIndex;
    myVar = setInterval(myTimer, 1000);
    tab
      .eq(tabIndex % tab.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextTab);
  }
  showNextTab();
})();

function myTimer() {
  var leftPos = $(".info").scrollLeft();
  $(".info").animate({
    scrollLeft: leftPos + 200
  }, 800);
  myStopFunction();
}

function myStopFunction() {
  clearInterval(myVar);
}

.info-wrap {
  background: skyblue;
  display: inline-block;
  line-height: 1;
  width: 500px;
  padding: 20px;
}

.info {
  display: inline-block;
  line-height: 1;
  width: 500px;
  overflow: hidden;
}

.info .tab {
  display: none;
}

h2.tab {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<duv class="info-wrap">
  <div class="info">
    <h2 class="tab">This is the first line.</h2>
    <h2 class="tab">This is the second line.</h2>
    <h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
    <h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
  </div>
  </div>

问题一：为什么第四个<h2 class="tab">元素不是从头开始滚动的？它似乎从中间点开始，向右。

问题2：如何修改左滑动画的速度？我试图了解myVar = setInterval(myTimer, 1000);目标是什么，以及 scrollLeft: leftPos + 200}, 800);.

标签： javascriptjqueryanimationscrolljquery-animate

Answer 1

解释：

问题1：因为滚动最大宽度是相对的，基于创建多少字符来确定滚动大小的宽度。就在函数初始化时，变量$('.info').scrollLeft()似乎保存了前一点。因此，我通过添加以下代码重新初始化该代码：

$(".info").animate({scrollLeft: 0}, 0); //$(.info) point = 0

Question2：左边动画可以通过增加leftPos的值来加速。这myVar = setInterval(myTimer, 1000);是确定起点。这意味着该功能将从 1 秒开始。

无论如何这里是下面的例子

 

var myVar = "";

(function() {
  var tab = $(".info .tab");
  var tabIndex = -1;
  function showNextTab() {
    ++tabIndex;
    myVar = setInterval(myTimer, 1000); 
    tab
      .eq(tabIndex % tab.length)
      .fadeIn(2000)
      .delay(1000)
      .fadeOut(2000, showNextTab);
    $(".info").animate({scrollLeft: 0}, 0);
  }
  showNextTab();
})(); 
function myTimer() {
var leftPos = $('.info').scrollLeft();
$(".info").animate({scrollLeft: leftPos + 1500}, 800);
myStopFunction();
}
function myStopFunction() {
clearInterval(myVar);
}

.info {
  background: skyblue;
  display: inline-block;
  line-height: 1;
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
  overflow:scroll;
}

.info .tab {
  display: none;
}

h2.tab {
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info">
  <h2 class="tab">This is the first line. testtesttesttesttesttesttttttttttt</h2>
  <h2 class="tab">This is the second line.</h2>
  <h2 class="tab">This is the third line (which is longer than the first and second line.)</h2>
  <h2 class="tab">This is the fourth line (which is longer than the first, second, and third line.)</h2>
</div>