Animation How to - Animate back to default if clicking anywhere else on the page

Question

We would like to know how to animate back to default if clicking anywhere else on the page.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
#image-container {<!-- w  ww  .  j a v  a2 s. c  o m-->
  height: 200px;
  background: black;
  width: 200px
}
</style>
<script type='text/javascript'>
$(window).load(function(){
    $(document).click(function(){
            $("#image-container").animate({"width": "200px"}, 500);
     });
    $("#image").click(function(){
            $("#image-container").animate({"width": "350px"}, 500);
            return false;
    });
});
</script>
</head>
<body>
  <div id="image">
    <div id="image-container"></div>
  </div>
</body>
</html>

The code above is rendered as follows: