1
\$\begingroup\$

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?

Improve this question
\$\endgroup\$
2
  • 6
    \$\begingroup\$ The desire to improve code is implied for all questions on this site. Question titles should reflect the purpose of the code, not how you wish to have it reworked. See How to Ask. \$\endgroup\$
    – Jamal
    Jun 7, 2015 at 21:58
  • 1
    \$\begingroup\$ The desire to improve code is implied for all questions on this site. Question titles should reflect the purpose of the code, not how you wish to have it reworked. See How to Ask. \$\endgroup\$
    – anon
    Jun 8, 2015 at 0:29

1 Answer 1

Reset to default
3
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Hi, thanks! What I'm not understanding it the hovering variable, as well as passing it in toggleClass? Could you explain that bit? \$\endgroup\$
    – user75268
    Jun 8, 2015 at 3:35
  • \$\begingroup\$ @user75268 Sorry for the delay. If you check the jQuery docs for toggleClass, you'll see there are two ways to call it. If you just give it a class, it'll add that class if it's missing, and remove it if it's present. I.e. toggling it. But if you give it a boolean as the 2nd argument, you force it to either remove or add the class. So toggleClass("foo", true) will act the same as addClass("foo"); if you passed false, it'll act like removeClass("foo"). \$\endgroup\$
    – Flambino
    Jun 8, 2015 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.