gpt4 book ai didi

javascript - jquery news ticker 在淡入和淡出时出现错误

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:15 25 4
gpt4 key购买 nike

我正在尝试制作一个 jquery 新闻自动收报机。

我快到了,但它在淡入淡出过渡期间出现故障,而不是平滑地淡出到下一个元素。

任何人都可以指出如何解决这个问题的正确方向吗?谢谢

我认为当它淡入/淡出时需要做一些事情,因为它会同时显示两个 li,然后会出现奇怪的格式

代码笔链接: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;
}

j查询

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


});

最佳答案

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

一个简单的解决方案是使用绝对 位置并相应地更改定位(顶部、左侧)以保持当前设计

像这样:( 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>

关于javascript - jquery news ticker 在淡入和淡出时出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55221654/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com