Javascript jQueryNewsTicker在淡入淡出时出现错误

我在试着做一个jquery新闻行情器

我就快到了，但它在淡入淡出的过渡期中被窃听掉了，而不是平稳地淡入下一个项目

有人能告诉我如何解决这个问题的正确方向吗？谢谢

我认为当它淡入/淡出时应该做些什么，因为它同时显示了两个李，然后格式奇怪

代码笔链接：

jquery

 jQuery(document).ready(function($){

 var tickerSpeed = $('.news-ticker').attr('data-speed');

 $('.news-ticker ul li').hide();
 $('.news-ticker ul li:first').show();

 var currentSlide = 0;
 var slideCount = ($('.news-ticker li').length) - 1;

 var startTicker = setInterval(function(){

 $('.news-ticker ul li').eq(currentSlide).fadeOut(500)

 if (currentSlide < slideCount) {
  currentSlide += 1;
 } else {
  currentSlide = 0;
 }

 $('.news-ticker ul li').eq(currentSlide).fadeIn(500)

 }, tickerSpeed);


 });

jQuery（文档）.ready（函数（$）{
var tickerSpeed=$（'.news ticker'）.attr（'data-speed'）；
$（'.news ticker ul li'）.hide（）；
$（'.news ticker ul li:first'）.show（）；
var currentSlide=0；
var slideCount=（$（'.news ticker li'）.length）-1；
var startTicker=setInterval（函数（）{
$（'.news ticker ul li'）.eq（currentSlide）.fadeOut（500）
如果（当前幻灯片<幻灯片计数）{
电流滑动+=1；
}否则{
currentSlide=0；
}
$（'.news ticker ul li'）.eq（currentSlide）.fadeIn（500）
}，股票速度）；
});

问题在于您为列表元素选择了一个相对的位置。 您不能以这种方式将它们堆叠在一起，以便在短时间内两个元素都可见，并且第二个列表放在第一个下面

一个简单的解决方案是使用

绝对

位置，并相应地更改位置（顶部，左侧），以保持当前设计

就像这样： （）

jQuery（文档）.ready（函数（$）{
var tickerSpeed=$（'.news ticker'）.attr（'data-speed'）；
$（'.news ticker ul li'）.hide（）；
$（'.news ticker ul li:first'）.show（）；
var currentSlide=0；
var slideCount=（$（'.news ticker li'）.length）-1；
var startTicker=setInterval（函数（）{
$（'.news ticker ul li'）.eq（currentSlide）.fadeOut（500）
如果（当前幻灯片<幻灯片计数）{
电流滑动+=1；
}否则{
currentSlide=0；
}
$（'.news ticker ul li'）.eq（currentSlide）.fadeIn（500）
}，股票速度）；
});
正文{
保证金：0；
背景#002653；
}
.新闻播报员{
宽度：70%；
位置：绝对位置；
填充：20px；
利润率：20px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
排名：0；
左：0；
背景图像：线性梯度（#FEFEFE，#c3c3）；
颜色：#002653；
字体系列：“开放式Sans”，无衬线；
边界半径：10px；
}
.新闻播报员.播报员标题{
字号：600；
浮动：左；
宽度：23%；
文本转换：大写；
字母间距：0.08em；
}
.新闻票务{
列表样式：无；
填充：0；
保证金：0；
}
.李先生{
位置：绝对位置；
填充：0；
保证金：0；
文本对齐：左对齐；
最高：33%；
左：30%；
列表样式：无；
浮动：左；
}
.股票导航{
宽度：150px；
高度：50px；
位置：绝对位置；
右：0；
光标：指针；
填充：0；
利润率：0 10px 0px 0px；
文本对齐：右对齐；
排名前10%；
}
.news ticker.fa stack{
字号：1.5em；
保证金：0；
填充：0；
宽度：2米；
}
.ticker nav span{
保证金：0；
填充：0；
}

!

-------
||||||||||

动画应该是什么样子<代码>$（'.news ticker ul li'）.hide（）设置
显示：无
中的
li
不保留空间
$（'.news ticker ul li'）.eq（currentSlide）.fadeOut（500）
强制再次显示元素，这就是为什么两者同时显示的原因。如果它们在淡入淡出时重叠，请在
上尝试
position:absolute
。
news ticker li
：正如@empiric所说，
position:absolute
是一种方法，如果您希望它们彼此重叠淡出。你可以将它们放置在一个相对位置设置为
position:relative
，这样你就不必手动定位了。哦，谢谢大家！哦，我现在觉得很愚蠢，因为我以前没有发现它！！非常感谢，这里有一支使用flexbox的原版笔叉，不使用绝对单位放置孩子：（尽管它要求包含股票代码的ul的最小高度）。使用转换可能是另一种可能性。@Jake感谢您花时间来平滑它。请注意，尽管到目前为止，flexbox还没有得到所有浏览器的支持，但在使用自动前缀器或其他前缀解决方案实施flexbox时，并注意到已知的错误（主要是IE），我认为使用flexbox是安全的（见和）
body {
margin: 0;
background: #002653;
}

.news-ticker {
width: 70%;
position: absolute;
padding: 20px;
margin: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
background-image: linear-gradient(#FEFEFE, #C3C3C3);
color: #002653;
font-family: 'Open Sans', sans-serif;
border-radius:10px;
}

.news-ticker .ticker-title {
font-weight: 600;
float:left;
width:23%;
text-transform:uppercase;
letter-spacing:0.08em;

}

.news-ticker ul {
list-style: none;
padding: 0;
margin: 0;

}

.news-ticker li {
position: relative;
padding: 0;
margin: 0;
text-align: left;
top: 50%;
list-style:none;
float:left;
}

.ticker-nav {
width: 150px;
height: 50px;
position: absolute;
right: 0;
cursor: pointer;
padding: 0;
margin: 0 10px 0px 0px;
text-align: right;
top: 10%;
}

.news-ticker .fa-stack {
font-size: 1.5em;
margin: 0;
padding: 0;
width:2em;
}

.ticker-nav span {
 margin:0;
 padding: 0;
}

 jQuery(document).ready(function($){

 var tickerSpeed = $('.news-ticker').attr('data-speed');

 $('.news-ticker ul li').hide();
 $('.news-ticker ul li:first').show();

 var currentSlide = 0;
 var slideCount = ($('.news-ticker li').length) - 1;

 var startTicker = setInterval(function(){

 $('.news-ticker ul li').eq(currentSlide).fadeOut(500)

 if (currentSlide < slideCount) {
  currentSlide += 1;
 } else {
  currentSlide = 0;
 }

 $('.news-ticker ul li').eq(currentSlide).fadeIn(500)

 }, tickerSpeed);


 });