JSFiddle - React, Tailwind, and code Playground

by treeface

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js" type="text/javascript"></script> 
    <h1>Simple Spy</h1> 
 
    <div id="sidebar"> 
        <ul class="spy"> 
          <li> 
            <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a> 
            <h5><a href="#" title="View round">round</a></h5> 
            <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p> 
            <p class='rating none'>Not Rated</p> 
 
            <p class="tags"></p> 
          </li> 
 
          <li> 
 
            <a href="#" title="View reflet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/2.png" title="" /></a> 
            <h5><a href="#" title="View reflet">reflet</a></h5> 
            <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p> 
 
            <p class='rating none'>Not Rated</p> 
            <p class="tags"><a href="#" title='Find more images tagged Tactile'>Tactile</a></p> 
          </li> 
 
          <li> 
 
            <a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/3.png" title="" /></a> 
            <h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5> 
 
            <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p> 
            <p class='rating four'>Four Stars</p> 
            <p class="tags"><a href="#" title='Find more images tagged Kate Moross'>Kate Moross</a></p> 
          </li> 
 
          <li> 
 
            <a href="#" title="View Untitled"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/4.png" title="" /></a> 
 
            <h5><a href="#" title="View Untitled">Untitled</a></h5> 
           ...

JavaScript

$(function () {
    $('ul.spy').simpleSpy();
});
 
(function ($) {
    
$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;
    
    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();
            
        // capture the cache
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });
        
        total = items.length;
        
        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
        
        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
 
        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0
            }).prependTo($list);
            // fade the LAST item out
            $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                // increase the height of the NEW first item
                $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
                
                // AND at the same time - decrease the height of the LAST item
                // $(this).animate({ height : 0 }, 1000, function () {
                    // finally fade the first item in (and we can remove the last)
                    $(this).remove();
                // });
            });
            
            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }
            
            setTimeout(spy, interval)
        }
        
       ...