On hover, hide text and display options
One thing you could do is create functions to call instead of writing each sub function out every time you want to animate something.

var hideText = function(element) {

    $('#menu ' + element).stop().animate({
      width: '0px',
      opacity: 0
    }, $('#menu ' + element).hide);
}

var showText = function(element, elementWidth) {

    $('#menu ' + element).stop().show().animate({
      width: elementWidth,
      opacity: 1
    });
}


Now you can call this like this, with less repeated code:

  $('#menu').hover(
    function() { // mouseenter

      hideText('span');
      showText('a', '100px');
    },
    function() { //mouseleave

      hideText('a');
      showText('span', '250px');
    });
});




$(document).ready(function() {

  var hideText = function(element) {
      
      $('#menu ' + element).stop().animate({
        width: '0px',
        opacity: 0
      }, $('#menu ' + element).hide);
  }

  var showText = function(element, elementWidth) {
      
      $('#menu ' + element).stop().show().animate({
        width: elementWidth,
        opacity: 1
      });
  }

  $('#menu').hover(
    function() { // mouseenter

      hideText('span');
      showText('a', '100px');
    },
    function() { //mouseleave

      hideText('a');
      showText('span', '250px');
    });
});
#menu {
  width: auto;
}
#menu * {
  overflow: hidden;
  white-space: nowrap;
  font-size: 30px;
  text-align: center;
}
#menu a {
  display: none;
  width: 0px;
  opacity: 0;
}
#menu span {
  display: inline-block;
  width: 250px;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;div id="menu"&gt;
    &lt;span&gt;Hover for items!&lt;/span&gt;
    &lt;a href="#1"&gt;Item 1&lt;/a&gt;
    &lt;a href="#2"&gt;Item 2&lt;/a&gt;
    &lt;a href="#3"&gt;Item 3&lt;/a&gt;
  &lt;/div&gt;
&lt;/body&gt;