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?