淡入和淡出时jquery新闻行情记录仪正在调试

Question

I'm trying to make a jquery news ticker. 我正在尝试制作一个jQuery新闻行情。

I'm nearly there but its bugging out during the fade transition instead of smoothly fading to the next item. 我快到了，但它会在淡入淡出过渡时出现错误，而不是平滑淡入下一个项目。

Can anyone point me in the right direction of how to fix this? 谁能指出我正确的解决方法？ thanks 谢谢

I think its something to do when its fading in/out as it shows both li's at once which then formats strangely 我认为它在淡入/淡出时需要做的事情是，它一次显示两个李，然后奇怪地格式化

codepen link : https://codepen.io/anon/pen/zbajVG 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 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的

 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);


 });

Answer 1

The Problem is that you choose a relative position for the list elements. 问题是您为列表元素选择了relative位置。 You can't stack them on each other that way so at a short timespan both element are visible and the 2nd ist put below the 1st. 您不能以这种方式将它们彼此堆叠，因此在短时间内都可以看到两个元素，并且第二个ist放在第一个之下。

A simple solution would be to use a absolute position and change the positionings (top, left) accordingly to keep the current design 一个简单的解决方案是使用absolute位置并相应地更改位置（上，左）以保持当前设计

Like that: ( codepen fork ) 像这样：（ 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新闻行情记录仪正在调试

问题描述

1 个解决方案

解决方案1
1 2019-03-18 12:53:14

淡入和淡出时jquery新闻行情记录仪正在调试

问题描述

1 个解决方案

解决方案1 1 2019-03-18 12:53:14

解决方案1
1 2019-03-18 12:53:14