淡入和淡出时jquery新闻行情记录仪正在调试
[英]jquery news ticker is bugging when fading in and out
问题描述
我正在尝试制作一个jQuery新闻行情。
我快到了，但它会在淡入淡出过渡时出现错误，而不是平滑淡入下一个项目。
谁能指出我正确的解决方法？ 谢谢
我认为它在淡入/淡出时需要做的事情是，它一次显示两个李，然后奇怪地格式化
codepen链接： https ://codepen.io/anon/pen/zbajVG
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="news-ticker" data-speed="5000">
<div class="ticker-title">Important Announcements |</div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit 1....</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit 2....</li>
</ul>
<div class="ticker-nav">
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-arrow-left fa-stack-1x" style="color:white"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-arrow-right fa-stack-1x" style="color:white"></i>
</span>
</div>
</div>
CSS
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的
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);
});
1 个解决方案
解决方案1
1 2019-03-18 12:53:14
问题是您为列表元素选择了relative位置。 您不能以这种方式将它们彼此堆叠，因此在短时间内都可以看到两个元素，并且第二个ist放在第一个之下。
一个简单的解决方案是使用absolute位置并相应地更改位置（上，左）以保持当前设计
像这样：（ codepen fork ）
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); });
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: absolute; padding: 0; margin: 0; text-align: left; top: 33%; left: 30%; 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; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </head> <body> <div class="news-ticker" data-speed="5000"> <div class="ticker-title">!</div> <ul> <li> ------------ </li> <li> |||||||||||| </li> </ul> <div class="ticker-nav"> <span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-arrow-left fa-stack-1x" style="color:white"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-arrow-right fa-stack-1x" style="color:white"></i> </span> </div> </div>
jquery新闻自动收报机
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.