Set Interval animation

by Kheema Pandey

HTML

The div will animate the width to show what I mean 
<br><br>
    
<div class="module">
    <div class="module-info">
        <h3>TITLE</h3>
        <h4>a</h4>
    </div>
    
    <div class="module-controls-wrapper">
        <div class="module-controls">
            <div class="controls-group">
                <button class="module-button module-start">Start</button>
                <button class="module-button module-stop">Stop</button>
            </div>
            
            <div class="controls-group">
                 <button class="module-button module-edit">Edit</button>
                 <button class="module-button module-remove">Remove</button>
            </div>
        </div>
    </div>
</div>

CSS

h2,h3,h4{
    margin: 0;
    padding: 0;
}
.module{
    width: 400px;
    display: table;
}

.module-info {
    vertical-align: top;
    display: table-cell;    
    border: medium dashed #03F;
}
.module-controls-wrapper {
    display: table-cell;
    border: medium solid #C00;
    text-align: center;
}

.module-controls{
   position: relative;
    margin: 0 auto;
    max-width: 256px;
    display: inline-block;

}
.controls-group{
    position: relative;
    width: 124px;
    display: inline-block;
}
.module-button{
    width: 60px;
}

JavaScript

setInterval(function(){
    $('.module-info').animate({'width':'400px'},2500,function(){
        $(this).animate({'width':'0px'},2500);
    });
}, 5000);