jQuery多股票显示/隐藏闪烁

时间:2016-01-15 19:25:21

标签: jquery html css show-hide ticker

我有三个代码,我正在使用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);
}
});

2 个答案:

答案 0 :(得分:1)

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

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

Updated Example

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

答案 1 :(得分:0)

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