Бегущая строка новостей jquery глючит при исчезновении и исчезновении

Я пытаюсь сделать бегущую строку jquery.

Я почти у цели, но во время перехода затухания возникает ошибка, а не плавное затухание к следующему элементу.

Может ли кто-нибудь указать мне правильное направление, как это исправить? Благодарность

Я думаю, что это что-то делать, когда он исчезает / исчезает, так как он показывает оба li одновременно, которые затем странно форматируются.

ссылка на 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);


 });

javascript jquery css ticker
person CodePine    schedule 18.03.2019    source источник
comment
Как должна выглядеть анимация? $('.news-ticker ul li').hide(); устанавливает display:none, в котором li не резервирует место. $('.news-ticker ul li').eq(currentSlide).fadeOut(500) заставляет элемент отображаться снова, поэтому оба отображаются одновременно. Если они должны перекрываться при затухании, попробуйте position:absolute на .news-ticker li: https://codepen.io/anon/pen/YgvjdK   -  person empiric    schedule 18.03.2019
comment
Как сказал @empiric, position: absolute будет подходящим вариантом, если вы хотите, чтобы они исчезали друг над другом. Вы можете разместить их в родительском наборе position: relative, чтобы вам не приходилось позиционировать их вручную.   -  person Jake    schedule 18.03.2019
comment
О, спасибо, ребята! О, я чувствую себя так глупо, что не заметила этого раньше!! Спасибо большое   -  person CodePine    schedule 18.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что вы выбираете позицию relative для элементов списка. Вы не можете складывать их друг на друга таким образом, поэтому через короткий промежуток времени оба элемента видны, а второй элемент помещается ниже первого.

Простым решением было бы использовать позицию absolute и соответствующим образом изменить позиции (сверху, слева), чтобы сохранить текущий дизайн.

Вот так: (вилка codepen)

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>

person zeropublix    schedule 18.03.2019
comment
Вот ответвление исходного пера с использованием flexbox, чтобы не размещать дочерние элементы с использованием абсолютных единиц: codepen.io/anon /pen/OqEoWg (хотя требуется минимальная высота для ul, содержащего элементы бегущей строки). Использование преобразований может быть другой возможностью. - person Jake; 18.03.2019
comment
@ Джейк, спасибо, что нашел время, чтобы сгладить это. Имейте в виду, что flexbox до сих пор не поддерживается каждым браузером. - person zeropublix; 18.03.2019
comment
При реализации с использованием автоматического префикса или других решений для префикса и зная об известных ошибках (в основном IE), я бы сказал, что его безопасно использовать (см. Могу ли я использовать страницу и Flexbugs) - person Jake; 18.03.2019