Jquery翻转悬停

【问题标题】：Jquery Flip on HoverJquery翻转悬停
【发布时间】：2012-12-26 18:45:08
【问题描述】：

这是我的代码：

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

我的点击事件运行良好，但我的悬停事件只是让我头疼，我做错了什么？

【问题讨论】：

标签： jquery hover flip

【解决方案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;
});

问题是

revertFlip 之后您没有恢复课程
悬停只应执行一次。（我为此使用了一个变量）

【讨论】：