How can I make this jQuery code better so variables aren't repeated and the code is more efficient? It adds and removes classes from animate.css when mouse events occur. Though I hate how I had to write the same thing twice in both events.

var item = $('.work-item');

item.mouseenter(function(event) {
  var $this = $(this);
  var cover = $(this).find('.item-cover'),
      coverTitle = cover.find('.title');
      coverShortDescription = cover.find('.short-description'),
      coverSep = cover.find('.seperator');
  cover.removeClass('fadeOut').addClass('animated fadeIn');
  coverTitle.removeClass('fadeOutDown').addClass('animated fadeInUp');
  coverShortDescription.removeClass('fadeOutUp').addClass('animated fadeInDown');
  coverSep.removeClass('fadeOut').addClass('animated fadeInUp');
}).mouseleave(function(event) {
  var $this = $(this);
  var cover = $(this).find('.item-cover'),
      coverTitle = cover.find('.title');
      coverShortDescription = cover.find('.short-description'),
      coverSep = cover.find('.seperator');
    cover.removeClass('fadeIn').addClass('fadeOut');
    coverTitle.removeClass('fadeInUp').addClass('animated fadeOutDown');
    coverShortDescription.removeClass('fadeInDown').addClass('animated fadeOutUp');
    coverSep.removeClass('fadeInUp').addClass('fadeOut');
});


Any way to make this more efficient?
Have a look at the .hover() event and .toggleClass().

With those, you could do:

item.hover(function (event) {
  var hovering = event.type === 'mouseenter',
      cover = $(this).find('.item-cover'),
      title = cover.find('.title');
      description = cover.find('.short-description'),
      separator = cover.find('.seperator');

  // skip this by simply adding "animated" in the HTML to begin with
  $().add(cover, title, description, separator).addClass('animated');

  // toggle with a boolean argument to force one state or another
  cover.toggleClass('fadeOut', !hovering).toggleClass('fadeIn', hovering);
  title.toggleClass('fadeOutDown', !hovering).toggleClass('fadeInUp', hovering);
  description.toggleClass('fadeOutUp', !hovering).toggleClass('fadeInDown', hovering);
  separator.toggleClass('fadeOut', !hovering).toggleClass('fadeInUp', hovering);
});


But it might be nice to be more "declarative" by adding a little helper function:

item.hover(function (event) {
  var hovering = event.type === 'mouseenter',
      cover = $(this).find('.item-cover'),
      title = cover.find('.title');
      description = cover.find('.short-description'),
      separator = cover.find('.seperator');

  // toggle the enterClass if mouse is hovering, otherwise toggle leaveClass
  function setClass(selection, enterClass, leaveClass) {
    selection.toggleClass(enterClass, hovering).toggleClass(leaveClass, !hovering);
  }

  // skip this by simply adding "animated" in the HTML to begin with
  $().add(cover, title, description, separator).addClass('animated');

  setClass(cover, 'fadeIn', 'fadeOut');
  setClass(title, 'fadeInUp', 'fadeOutDown');
  setClass(description, 'fadeInDown', 'fadeOutUp');
  setClass(separator, 'fadeInUp', 'fadeOut');
});


By the way, it's "separator" with two a's, not two e's.