jQuery contents scroller在第一个之后未能显示列表项目

Question

所以我有一个新闻滚动器，它可以旋转一系列新闻项目，从而逐渐消失。由于某种原因，在移动设备上，它显示了第一个项目后的故障，隐藏了所有其他项目。Chrome DevTools告诉我，它们无法显示，因为他们的display设置为none。我的问题是，为什么这会在台式机上使用，但是在移动设备上发生故障(即iPhone 6/7/8(？这是用于显示项目的代码：

newsArr = ['Item 1','Item 2','Item 3','Item 4'];
$.each(newsArr, function(i) {
  $('ul#newsScroller').append('<li class="news-item">' + newsArr[i] + '</li>');
  $('#allNewsDiv').append('<div class="all-news-item"><img src="https://dl.dropbox.com/s/r8nu1zb2gpzd92k/Ball%20Icon.png" alt="" style="float:left; margin-right:10px; position: relative; top: 2px;" width="20" height="20"><div class="all-news-item-text">' + newsArr[i] + '</div></div>');
});
// Determine the height of the li element and set the scroller to that height
var maxScrollerHeight = Math.max.apply(null, $('ul#newsScroller li').map(function() {
  return $(this).outerHeight(true);
}).get());
$('#newsScroller').css({
  'height': (maxScrollerHeight) + 'px',
  'opacity': '1'
});
// Hide li elements initially
$('ul#newsScroller li').css({
  'display': 'none'
});
(function() {
  var newsItems = $(".news-item");
  var newsItemsIndex = -1;
  function showNextNewsItems() {
    ++newsItemsIndex;
    newsItems.eq(newsItemsIndex % newsItems.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextNewsItems);
  }
  showNextNewsItems();
})();

https://jsfiddle.net/shaneswebdevelopment/k2ptfhqz/

Answer 1

我找到了一篇有关iPhone上/输出的问题的文章：

jQuery Fadein不用iPhone

也许您必须将列表的位置设置为亲戚。

newsArr = ['Item 1','Item 2','Item 3','Item 4'];
$.each(newsArr, function(i) {
  $('ul#newsScroller').append('<li class="news-item">' + newsArr[i] + '</li>');
  $('#allNewsDiv').append('<div class="all-news-item"><img src="https://dl.dropbox.com/s/r8nu1zb2gpzd92k/Ball%20Icon.png" alt="" style="float:left; margin-right:10px; position: relative; top: 2px;" width="20" height="20"><div class="all-news-item-text">' + newsArr[i] + '</div></div>');
});
// Determine the height of the li element and set the scroller to that height
var maxScrollerHeight = Math.max.apply(null, $('ul#newsScroller li').map(function() {
  return $(this).outerHeight(true);
}).get());
$('#newsScroller').css({
  'height': (maxScrollerHeight) + 'px',
  'opacity': '1'
});
// Hide li elements initially
$('ul#newsScroller li').css({
  'display': 'none',
  'position': 'relative'
});
(function() {
  var newsItems = $(".news-item");
  var newsItemsIndex = -1;
  function showNextNewsItems() {
    ++newsItemsIndex;
    newsItems.eq(newsItemsIndex % newsItems.length)
  .fadeIn(2000)
  .delay(2000)
  .fadeOut(2000, showNextNewsItems);
  }
  showNextNewsItems();
})();

Answer 2

解决问题！

我从使用display样式属性更改为使用opacity。每个新闻项目都设置为position: absolute，并像这样淡入和淡出：

// Hide li elements initially
$('ul#newsScroller li').css({
  'opacity': '0'
});
(function() {
  var newsItems = $(".news-item");
  var newsItemsIndex = -1;
  function showNextNewsItems() {
    ++newsItemsIndex;
    newsItems.eq(newsItemsIndex % newsItems.length)
      .fadeTo(2000,1)
      .delay(2000)
      .fadeTo(2000,0,showNextNewsItems);
  }
  showNextNewsItems();
})();