Jquery翻转悬停

Question

这是我的代码：

'$(".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/

我的点击活动效果很好，但是我的悬停事件只是弄乱了我的头脑，我做错了什么？

Answer 1

更新了您的代码。请参阅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;
});

问题是

1. 您未在revertFlip
之后恢复课程
2. 悬停应该只执行一次。 （我用了一个变量）