Animation How to - Hover to enlarge div

Question

We would like to know how to hover to enlarge div.
Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
.outer {<!--from w  ww .  j  a va2s. co  m-->
  border: 1px solid grey;
  border-radius: 4px;
  padding: 7px;
  margin: 1em;
  height: 25px;
  display: inline-block;
}

.title {
  float: left;
  margin-right: 5px;
}

.resizewrap {
  float: left;
  background-color: #EEE;
  color: black;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.number {
  display: block;
  float: left;
}

.details {
  width: 0px;
  display: none;
  float: left;
  margin-left: 10px;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
    $(document).ready(function(){
        $('.outer').mouseover(function(){
            $('.details').css('display','block');      
            $('.details').stop().animate({width:200},1000);
        });
        $('.outer').mouseout(function(){
            $('.details').stop().animate({width:0},1000,function(){
                  $('.details').css('display','none');          
            });
        });
    });
});
</script>
</head>
<body>
    <div class="outer">
      <div class="title">Detail</div>
      <div class="resizewrap">
        <div class="number">number</div>
        <div class="details">this is a test</div>
      </div>
    </div>
</body>
</html>
The code above is rendered as follows: