<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="fadein" style="height: 70px; width: 400px; background-color: grey;"> <img src="https://s27.postimg.org/skdo0uo5v/star.gif" border="0" width="80" height="70" alt="" style="display:block;margin:auto;" id="level2Menu" /> <img src="https://s27.postimg.org/skdo0uo5v/star.gif" width="80" height="70" alt="" style="display:block;margin-left: 80px;" id="level2Menu" /> <img src="https://s27.postimg.org/skdo0uo5v/star.gif" width="80" height="70" alt="" style="display:block;margin-left: 160px;" id="level2Menu" /> <img src="https://s27.postimg.org/skdo0uo5v/star.gif" width="80" height="70" alt="" style="display:block;margin-left: 240px;" id="level2Menu" /> <img src="https://s27.postimg.org/skdo0uo5v/star.gif" width="80" height="70" alt="" style="display:block;margin-left: 320px;" id="level2Menu" /> </div>

.fadein { overflow:hidden; height: 49px; } .fadein img{ position:absolute; }

$(function () { var fElement = $('.fadein'); if ( !console && !console.log ){ console = {}; console.log = function(){}; } fElement.find('img:gt(0)').hide(); setInterval(function () { if (!fElement.data('paused')) { fElement.find(':first-child').stop(true,true).fadeOut(100); fElement.find(':first-child').next('img').fadeIn(100).end(100).appendTo('.fadein'); //.stop(true,true) fixes le tabbed/hidden animation queue } else { console.log('waiting...'); } }, 500); });