Increase Decrease Width of DIV OnMouseOver using jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("div").bind("mouseover", function () {
            $(this).attr("rel", $(this).css("width"));
            $(this).css("width", "100%");
        });
        $("div").bind("mouseleave", function () {
            $(this).css("width", $(this).attr("rel"));
        });
    });
</script>
<div style="background: red; width: 200px; height: 100px">
</div>
<br />
<div style="background: blue; width: 300px; height: 100px">
</div>
<br />
<div style="background: green; width: 400px; height: 100px">
</div>