Bootstrap Snippet Animation using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
.fadein {
    overflow:hidden;
    height: 49px;
}
.fadein img{
    position:absolute;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    $(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);
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animation"
Bootstrap 3.3.0 Snippet by fahad666

Related: See More

Questions / Comments:

"Animation" Bootstrap 3.3.0 Snippet by fahad666

Related: See More

Questions / Comments:

"Animation"
Bootstrap 3.3.0 Snippet by fahad666