Question

我正在使用jquery的flip插件。我想翻转一张卡片（div），在完成翻转之后，立即将其翻转。这就是我试过的

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

        }
    })
}

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');
});

Answer 2

试着欺骗。制作2个不同的课程，

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

至少，这就是我在接近截止日期时所做的事情：P

我需要在悬停时翻转div

2 个答案: