jQuery 多行代码 show/hide 闪烁
jQuery multi-ticker show/hide flickering
我正在使用 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);
}
});
而不是 display: none;
,使用 CSS 属性 visibility: hidden;
。这样,space 将始终被不可见元素占据。
问题是您正在使用的脚本在元素 设置 动画时将高度设置为 38px
,然后将高度设置为 20px
在动画之前。在这样做的过程中,您看到的闪烁正在发生。
最简单的解决方案是在 .tickerwrap
个元素上指定 min-height
个 38px
。
.tickerwrap {
position: relative;
min-height: 38px;
overflow: hidden;
/* ... */
}
我正在使用 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);
}
});
而不是 display: none;
,使用 CSS 属性 visibility: hidden;
。这样,space 将始终被不可见元素占据。
问题是您正在使用的脚本在元素 设置 动画时将高度设置为 38px
,然后将高度设置为 20px
在动画之前。在这样做的过程中,您看到的闪烁正在发生。
最简单的解决方案是在 .tickerwrap
个元素上指定 min-height
个 38px
。
.tickerwrap {
position: relative;
min-height: 38px;
overflow: hidden;
/* ... */
}