javascript - How to get the slider to move back to its original position if a tab is not selected -

this code (located here http://jsfiddle.net/svvift/lhcaeboz/2/ , inserted below) works make animated navigation bar. wish have slider return original position if tab isn't selected. currently, still sits there regardless of selection or not.

html

<div id="slider"></div> <div id="red" class="item"></div> <div id="blue" class="item"></div> <div id="yellow" class="item"></div> <div id="green" class="item"></div> 

css

div {     display: inline-block;     float:left; }  #red {     background-color:#ff0000;     height:100px;     width:100px; }  #blue {     background-color:#0000ff;     height:100px;     width:200px; }  #yellow {     background-color:#e2be22;     height:100px;     width:50px; }  #green {     background-color:#008800;     height:100px;     width:170px; } #slider{     background-color:#6ff;     height:10px;     width:100px;     position: absolute;     left: 0;     top: 0; } 

script

$(document).ready(function(){       $("#slider").animate({           "left": $(".item:first").position().left + "px",           "width": $(".item:first").width() + "px"         }, 0);      $(".item").hover(function(){        $("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);     }); }); 

this tried

$("#slider").delay(3000).animate({     "left": $(this).position().left + "px",     "width": $(this).width() + "px" }, 500); 

are trying this?

 $(".item").on( "mouseout",function(){        $("#slider").stop();         $("#slider").animate({"left":$('#red').position().left+"px","width":$('#red').width()+"px"},500);     });