jQuery multi-ticker 显示/隐藏闪烁

Question

我使用 jQuery 循环使用三个代码。它运行良好，但我遇到的问题是每次切换自动收报机时都会出现轻微的闪烁。有谁知道这里可能有什么问题？这是我想念的非常简单的东西吗？

fiddle : https://jsfiddle.net/3yhaynpz/7/

jQuery

$('document').ready(function(){
var tick1 = $(".tick1");
var tick2 = $(".tick2");
var tick3 = $(".tick3");

tick2.hide();
tick3.hide();

cycle();
function cycle(){
    if (tick1.css('display') !== 'none')
      setTimeout(function() {
        tick1.hide();
        tick2.show();
        cycle();
      }, $('.tick1 ul li').length * 1000);

    else if (tick2.css('display') !== 'none')
      setTimeout(function() {
        tick2.hide();
        tick3.show();
        cycle();
      }, $('.tick2 ul li').length * 1000);

    else if (tick3.css('display') !== 'none')
      setTimeout(function() {
        tick3.hide();
        tick1.show();
        cycle();
      }, $('.tick3 ul li').length * 1000);
}
});

Answer 1

问题是您正在使用的脚本在元素上设置 38px 的高度 为它们设置动画，然后将高度设置为 20px 在动画之前。在这样做的过程中，您看到的闪烁正在发生。

最简单的解决方案是在 .tickerwrap 元素上指定 38px 的 min-height。

Updated Example

.tickerwrap {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  /* ... */
}