html - Show/Hide elements one by one repeatedly using jQuery -

html - Show/Hide elements one by one repeatedly using jQuery -

i trying show/hide set of elements 1 1 repeatedly.

following html:

<div id="1">div 1</div> <div id="2">div 2</div> <div id="5">div 5</div>

i've tried below script:

$(document).ready(function () { var repeat = function () { $('#1').show(); $('#1').delay(1000).hide(); $('#2').hide(); $('#2').delay(1000).show(); $('#2').delay(3000).hide(); $('#5').hide(); $('#5').delay(3000).show(); $('#5').delay(6000).hide(); }; setinterval(repeat, 6000); });

but divs visible @ once. after first 10 seconds hides , script done. pointers here appreciated.

fiddle

if understood correctly, you're looking fadetoggle()

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { var repeat = function() { $('#1').fadetoggle(1000); $('#2').fadetoggle(1000); $('#5').fadetoggle(1000); }; setinterval(repeat, 2000); }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="1">div 1</div> <div id="2">div 2</div> <div id="5">div 5</div>

if want display elements 1 one, can utilize finish callback of fadetoggle():

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { var repeat = function() { $('#1').fadetoggle(1000, function() { $('#2').fadetoggle(1000, function() { $('#5').fadetoggle(1000); }); }); }; setinterval(repeat, 4000); }); class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="1">div 1</div> <div id="2">div 2</div> <div id="5">div 5</div>

jquery html