CODEWITHSUNDEEP
jqueryhoverflip
Artur Mendes
Artur Mendes

Reputation: 127

Jquery Flip on Hover

Here's my code: 

'$(".hoverfront").mouseenter(function () {'
   var elem = $(this);
   elem.flip({
      direction: 'lr',
      color: 'red',
      speed: 700,
      content: $(".description"),
   onBefore: function(){
      $(this).removeClass('hoverfront');
      $(this).addClass('back');
   }
  });
}).mouseleave(function () {
      $(".back").revertFlip();
});

http://jsfiddle.net/mornaistar/eHfUa/

My click event works well, but my hover event is just messing my head, what am i doing wrong?

Upvotes: 0

Views: 4222

Answers (1)

Wolf
Wolf

Reputation: 2150

Updated your code. See the JSFiddle demo here

var isHover = false;
$(".hoverfront").mouseenter(function () {
  if (isHover == false) {
    isHover = true;
    var elem = $(this);
    elem.flip({
      direction: 'lr',
      color: 'red',
      speed: 700,
      content: $(".description"),
      onBefore: function () {
        elem.removeClass('hoverfront');
        elem.addClass('back');
      }
    });
  }
}).mouseleave(function () {
  var $this = $(this);
  $this.revertFlip();
  $this.removeClass('back');
  $this.addClass('hoverfront');
  isHover = false;
});

Issues were

  1. You were not reverting the classes after revertFlip
  2. Hover should be executed once only. (I used a variable for this)

Upvotes: 1

Related Questions