jQuery multi-ticker 显示/隐藏闪烁答案

【问题标题】：jQuery multi-ticker show/hide flickeringjQuery multi-ticker 显示/隐藏闪烁
【发布时间】：2016-01-15 19:25:20
【问题描述】：

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

小提琴： 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);
}
});

【问题讨论】：

看起来像高度从 20px 到 38px 的动画导致闪烁。
是的，如果您手动将函数 visHeight(anim) 中的高度设置为“38px”，而不是使用计算出的高度，闪烁就会消失。我会留给你来弄清楚高度计算有什么问题。或者您可以使用 css 手动设置高度。这是我的解决方法：jsfiddle.net/3yhaynpz/8

标签： jquery html css show-hide ticker

【解决方案1】：

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

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

Updated Example

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

【讨论】：

完美。完全按照我的需要去做。谢谢！

【解决方案2】：

使用 CSS 属性 visibility: hidden;，而不是 display: none;。这样，空间将始终被不可见元素占据。

【讨论】：