JSFiddle - React, Tailwind, and code Playground

by Phil Everton

HTML

<div class="page">
    <div class="blink yellow">This is object 1</div>
    <div class="blink green">This is object 2</div>
</div>
<div class="page">
    <div class="blink blue">This is object 3</div>
    <div class="blink red">This is object 4</div>
</div>
<div class="but">1. first object</div>
<div class="but">2. second object</div>

CSS

.page,.blink{display:block}
.blink,.but{padding:0.75em}
.page{width:9em;margin:0 0 0.75em 0}
.but{width:8em;float:left}

/*color*/
.yellow{background-color:yellow}
.green{background-color:green}
.blue{background-color:blue}
.red{background-color:red}

/***this isn't needed, just fun***/
body{font-family:sans-serif}
.blink{color:#CCCCCC}
.blink:hover{background-color:#EDEDED;color:#666666}
.but{margin:0 0.75em 0 0;color:#666666;background-color:#EDEDED;border:1px solid #CCCCCC;border-radius:15px;cursor:pointer}
.but:hover{background-color:#CCCCCC;color:#333333}

JavaScript

function blinkObject(p) {//p comes from 'but' function below
    $('.page').eq(p).show().children('.blink').stop(false,true).each(function(i) {//for each blink
        $(this).stop(true,false).fadeTo(0,0).delay(i*1000).animate({opacity: '1'}, 1000);//fadein
    }).end().siblings('.page').hide();//hide siblings
}

$('.page').first().siblings('.page').hide();//hide all but first

$(".but").each(function(i){//for each button get its index
    $(this).on('click', function() {
        blinkObject(i);//run blink with index as p
    });
});

//the only issue I found was when a button was clicked rapidly, which .stop() on its own wasn't fixing.
//by running stop(false,true) on the blinks when selected, then stop(true,false) before animation, it works
//.stop, .stop(true,true), and .stop(false,false) would not fix the queue buildup on thier own.
//not sure why alternating true/false on consequetive stops works, but it doesnt add much code.