Создание вертикального цикла прокрутки jQuery

Question

Я пытаюсь написать сценарий jQuery, который будет постоянно прокручивать теги <p> в их родительском <div>. Я получил идею от this site.

function shuffle(){ 
 

 
    $('#wrapper > p').each(function(){ 
 
     h = ($(this).offset().top + 130); 
 
     if(h > 500){ 
 
      console.log(h); 
 
      $(this).css ('top', 0); 
 
      return; 
 
     } 
 

 
     if(h == 270){ 
 
      $(this).addClass('current'); 
 
     } 
 

 
     if(h == 360){ 
 
      $(this).removeClass('current'); 
 
     } 
 
     
 
     $(this).animate({ 
 
      top: h, 
 
      easing: 'easeIn' 
 
     }, 500, ''); 
 
     
 
     if(h > 1350){ 
 
      $(this).css ('top', 0); 
 
     } 
 
    }); 
 

 
    window.setTimeout(shuffle, 2500); 
 
} 
 

 
var i = 0; 
 
     
 
$('#wrapper > p').each(function(){ 
 
    starter = $(this).css('top', ((i * 90)) + 'px'); 
 
    starterWhite = ($(this).offset().top + 130); 
 
    if((i*90) == 270) 
 
     $(this).addClass('current'); 
 
    $(this).css('top', starter); 
 
    i++; 
 
}); 
 

 
window.setTimeout(shuffle, 2000);

#wrapper { 
 
    height: 500px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.current { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
</div>

Проблема заключается в том, когда я пытаюсь сделать его прокрутки <p> тегов перекрывается, и выделенный тег не меняется. Любая идея, как заставить его работать? Here's a JSFiddle того, что я получил до сих пор.

Answer 1

Проверить this из:

// Constants, you can play with it 
 
var STEP = 90; 
 
var CURRENT_INDEX = 3; 
 

 
// Variables for calculating 
 
var currentTop = STEP * CURRENT_INDEX; 
 
var nextForCurrentTop = STEP * (CURRENT_INDEX + 1); 
 
var $numbers = $('#wrapper > p'); 
 
// In this case = 7 
 
var count = $numbers.length; 
 
var secondToLastTop = STEP * (count - 1); 
 

 
$numbers.each(function(i) { 
 
    var $this = $(this); 
 
    $this.css('top', i * STEP + 'px'); 
 

 
    if (i === CURRENT_INDEX) { 
 
     $this.addClass('current'); 
 
    } 
 
}); 
 

 
window.setTimeout(shuffle, 2000); 
 

 
function shuffle() { 
 
    $numbers.each(function() { 
 
     $this = $(this); 
 
     // Calculating the new position of the element 
 
     h = parseInt($this.css('top')) + STEP; 
 

 
     // In this case = 540 
 
     if (h > secondToLastTop) { 
 
      $this.css('top', 0); 
 
      return; 
 
     } 
 

 
     // In this case visually = 3rd element 
 
     if (h === currentTop) { 
 
      $this.addClass('current'); 
 
     } 
 

 
     // In this case visually = 4th element 
 
     if (h === nextForCurrentTop) { 
 
      $this.removeClass('current'); 
 
     } 
 

 
     $this.animate({ 
 
      top: h, 
 
      easing: 'easeIn' 
 
     }, 500, ''); 
 
    }); 
 

 
    window.setTimeout(shuffle, 2500); 
 
}

#wrapper { 
 
    height: 500px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.current { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
</div>

я улучшил и прокомментированы код из вашего примера, удаленные магические числа. Вы можете играть с константами.