Untitled

<html>
<head>
<style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script>
    $(function() {
        $("#initial").hover(function() {
            $( "#middle" ).toggle("slide", {}, 500 );
            return false;
        });
    });
    </script>
</head>
<body>


<h3>
<span id="initial">F</span><span id="middle" style="display: none">irst</span><span id="name">Second</span>
</h3>

</body>
</html>