Hope it helps !!! I have drafted the code with limited understanding, you can customise the code as your needs.
var counter = 0;
var ID;
$(document).ready(function() {
$("#asktextsearch").focus(function(){
counter = 0;
$(this).addClass('focusing');
setTimer();
});
});
function setTimer(){
ID = setInterval(function () {
startSlider(counter);
counter++;
console.log(counter);
}, 4000); // adjust delay here
}
function startSlider(){
if(counter>3){
stopFocus();
clearInterval(ID);
}else{
$('#asktextsearch').toggleClass('focusing');
}
}
function stopFocus() {
$("#asktextsearch").removeClass('focusing');
}
css:
#asktextsearch{
height: 20px;
width: 440px;
font-size: 12px;
color: Grey;
border: thin solid #CACACA;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
}
.focusing {
box-shadow: 0 0 5px rgba(209, 27, 28, 1);
-webkit-box-shadow: 0 0 5px rgba(209, 27, 28, 1);
-moz-box-shadow: 0 0 5px rgba(209, 27, 28, 1);
}
Demo link: http://jsfiddle.net/7ABNY/