javascript - Jquery Fade 循环遍历段落并一次显示一个元素

Question

我不能让它一次只显示一个。在只显示一个段落之前，它必须执行一个完整的循环。拔掉我的头发。

$(function(){

    setInterval(function(){$('.forumFeed > :first-child').fadeOut(3000).next('p').delay(3000).fadeIn(1000).end().appendTo('.forumFeed');}, 5000);
});

https://codepen.io/capseaslug/pen/yqyBXB

Answer 1

默认隐藏除第一段标签以外的所有标签。在 setInterval 中隐藏正在显示的那个并显示下一个(由索引变量控制)。

为了使元素很好地淡入/淡出，您可以在可见元素完成隐藏后淡入下一个元素。

在顶部添加了一些变量来处理循环遍历的元素的美学/数量。

所以没有 moment.js 所以我硬编码了一些字符串。 Codepen对于工作版本。

var numberOfItems = 10;
var flipSpeed = 2000;
var fadeOutSpeed = 500;
var fadeInSpeed = 200;

(function(c){
	var uniquename = 'rssfeed' // id of target div
	var query = 'select * from rss(0,' + numberOfItems + ') where url = "https://forums.mankindreborn.com/f/-/index.rss"'; // RSS Target, 0,5 signifies number of entries to show
  
	var numretries = 1; // increase this number (number of retries) if you're still having problems

		//////// No Need To Edit Beyond Here Unless You Want To /////////

	var counter = typeof c === 'number'? c : numretries;
	var thisf = arguments.callee;
	var head = document.getElementsByTagName('head')[0];
	var s = document.createElement('script');
	window["callback_" + uniquename + (--counter)] = function(r){
		head.removeChild(s);
		if(r && r.query && r.query.count === 0 && counter > 0){
			return thisf(counter);
		}
		//r now contains the result of the YQL Query as a JSON
   
		var feedmarkup = '';
		var feed = r.query.results.item // get feed as array of entries
    
		for (var i=0; i<feed.length; i++) {			 
      feedmarkup += '<p><span class="firstrowwrap"><a href="' + feed[i].link + '">';
			feedmarkup += feed[i].title + '</a> <span class="comments"> Replies: ';
      feedmarkup += feed[i].comments + ' </span></span><span class="secondRow"> <i class="fas fa-feather-alt"></i> ' ;
      feedmarkup += feed[i].creator + ' <span class="posttime"> Last Post: ';
      //pubishdate since
      publishDate = feed[i].pubDate; 
      var inDate = publishDate;
      var publisheddate = new Date(inDate);      
      feedmarkup += 'moment.js is missing ' + '</span></span></p>';
      //endpublishdate since
		}
		document.getElementById(uniquename).innerHTML = feedmarkup;
	};
	var baseurl = "https://query.yahooapis.com/v1/public/yql?q=";
	s.src = baseurl + encodeURIComponent(query) + "&format=json&callback=callback_" + uniquename + counter;
	head.append(s);
})();

$(function(){   
  var index = 0;  
  setInterval(function() {
    $('#rssfeed>p:visible').fadeOut(fadeOutSpeed, ()=> {
      $('#rssfeed>p').eq(index).fadeIn(fadeInSpeed);  
    });    
    
    index++;
    if(index === $('#rssfeed>p').length){
      index = 0;
    }    
  }, flipSpeed);
});
 
 

#main-container {
  padding:4em;
  background: #333;
  font-family: 'exo'
}

#rssfeed p:not(:first-child) {
  display: none;
}

a{
  font-weight:
    500;
  color: #68ddda;
}
a:hover{
  color: #4ca7a4;
}

.firstrowwrap{
  display: flex; 
    justify-content: space-between;
}
.secondRow{
  display: block;
  padding-top: 4px;
  margin-bottom: -5px;
}


#rssfeed p{
  background-color: #212121;
  padding: 10px;
  width: 400px;
  margin-bottom: 2px;
  color: #464646;
  
}

.comments{
	height: 18px;
	position: relative;
  z-index: 1;
  padding-left: 8px;
  margin-left: 4px;
  font-size: 12px;
}

.comments:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: #969696;
	border-radius: 2px;
  z-index: -1;
  margin-left: 4px;
  
}

.posttime{
 float: right; 
  font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid" id="main-container">
  <div class="row">
    <div class="col-md-12">

    <div class="forumFeed" id="rssfeed"></div>     
    </div>
  </div>
</div>