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>

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

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

Answer 1

EXPLANATION：

Question1 ：因为滚动的最大宽度是相对的，取决于创建多少个字符来形成滚动的宽度。就在函数初始化时，变量$('.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>

自动动画滚动到溢出其容器的元素的右边？

1 个答案: