jquery - 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 演示

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. 悬停应该只执行一次。（我为此使用了一个变量）