我需要在鼠标悬停时翻转一个div。

Question

我正在使用jquery的flip插件。我希望翻转一张卡片(div)，在它完成翻转后，立即将其还原(revertFlip)。以下是我的尝试：

  $("#flipbox").bind("hover",function(){
    $(this).flip({
        direction:'tb',
        onEnd: function() {
            $(this).revertFlip();
            console.log('when the animation has already ended');

        }
    })
} 

- Pinkal Mistry

---

你能否在 JSFiddle 上尝试重新创建它？ - Teun Pronk

它会翻转但不会翻回来，还是根本不会翻转？ - Qqwy

Answer 1

试试这个：http://jsfiddle.net/netwire88/NAbZT/16/

$(document).on("click", ".flipbox-forward", function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.flip({
        direction: $this.data("direction"),
        color: $this.data("color"),
        content: $this.data("title"),
        onBefore: function() {
            $this.removeClass('flipbox-forward');
            $this.addClass('flipbox-revert');
        }
    })
});

$(document).on("click", ".flipbox-revert", function(e) {
    e.preventDefault();
    var $this = $(this);
    $this.revertFlip();
    $this.removeClass('flipbox-revert');
    $this.addClass('flipbox-forward');
});​

- netwire

Answer 2

试图欺骗。 创建两个不同的类，

然后使用 mouseenter 事件来改变类，并使用 mouseleave 事件将其改回。

至少，在接近截止日期时我会做这种事情 :P

- Teun Pronk