旋轉木馬效果 - 使物品在第一次迭代後消失

Question

因此，我試圖在每次迭代之後讓旋轉木馬內的每個物品都消失。循環不斷重複，但項目不會消失。下面是帶有代碼的codepen。

任何幫助將不勝感激。謝謝..

$(function() { 
 
    var $items = $('img','.container'); 
 
    var currentIdx = 0; 
 
    // var timer; 
 

 
    var cycleItems = function() { 
 
    console.log('Running from cycleItems'); 
 
    
 
    
 
    $items.each(function(index, item) { 
 
    var $self = $(item); 
 
    
 
    setTimeout(function() { 
 
     
 
     console.log(`We are at this item: ${item}`);   
 
     console.log('currentindex has value : ' + currentIdx); 
 
     console.log('And we are at this index: ' + index);   
 
     $self.removeClass('isHidden').addClass('isActive'); 
 
     currentIdx++ 
 

 
    }, 1000*index); /* End of setTimeOut */ 
 
       
 
    if (index == $items.length - 1) {  
 
    // item.removeClass('isActive').addClasss('isHidden'); 
 
     console.log('Items : '+ $items); 
 
     setTimeout(cycleItems, (index + 1) * 1000); 
 
    } 
 
     
 
    }) /* End of each */ 
 
    
 
    } /* End of cycleItems func */ 
 
    
 
    cycleItems(); 
 
    
 
});

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    background: black; 
 
} 
 
.container { 
 
    display: inline; 
 
    //border: 1px solid white; 
 

 
} 
 
.slide {} .isActive { 
 
    visibility: visible; 
 
} 
 
.isHidden { 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=container> 
 
    <img class='isActive' src="http://placehold.it/350x150"> 
 
    <img class='isHidden' src="http://placehold.it/350x150"> 
 
    <img class='isHidden' src="http://placehold.it/350x150"> 
 
    <img class='isHidden' src="http://placehold.it/350x150"> 
 
</div>

Answer 1

由於帕羅奧在評論中說，剛加$（ 「IMG」）。addClass（ 「是否隱藏」）。

代碼：

$(function() { 
    var $items = $('img','.container'); 
    var currentIdx = 0; 
    // var timer; 

    var cycleItems = function() { 
    console.log('Running from cycleItems'); 


    $items.each(function(index, item) { 
    var $self = $(item); 

    setTimeout(function() { 

     console.log(`We are at this item: ${item}`);   
     console.log('currentindex has value : ' + currentIdx); 
     console.log('And we are at this index: ' + index);  

     $("img").addClass("isHidden") /* inputted piece of code */ 

     $self.removeClass('isHidden').addClass('isActive'); 

     currentIdx++ 

    }, 1000*index); /* End of setTimeOut */ 

    if (index == $items.length - 1) {  
    // item.removeClass('isActive').addClasss('isHidden'); 
     console.log('Items : '+ $items); 
     setTimeout(cycleItems, (index + 1) * 1000); 
    } 

    }) /* End of each */ 

    } /* End of cycleItems func */ 

    cycleItems(); 
    //clearTimeout(timer); 

    /*var toggleInvisible = function() { 

    }*/ 
});