jquery - 使用 jQuery 添加时，魔术 CSS3 动画无法正常工作

Question

我正在尝试在某些代码（http://www.minimamente.com/magic-css3-animations/）中使用一些魔术 css 类，并尝试使用带有 mouseenter 和 mouseleave 的 jquery 添加它们，但是它不工作......在全部！

以下是我尝试过的代码

$(document).ready(function(){
    $('#banner-holder').on('mouseenter', function(){
        $(this).find('#prev, #next').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function(){
        $(this).find('#prev, #next').removeClass('perspectiveLeft');
        $(this).find('#prev, #next').addClass('perspectiveLeftRetourn');
    });
});

它触发perspectiveLeft，但在鼠标移出时它不会执行perspectiveLeftRetourn。我犯了一个简单的错误吗？

Answer 1

这是一个小提琴

似乎适用于以下

$(document).ready(function () {
    var els = $('#prev, #next');
    $('#banner-holder').on('mouseenter', function () {
        els.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft');
    });
    $('#banner-holder').on('mouseleave', function () {
        els.removeClass('perspectiveLeft').addClass('perspectiveLeftRetourn');
    });
});

编辑：您可能还想perspectiveLeftRetourn在mouseenter.

Answer 2

$(document).ready(function(){
    $('#banner-holder').hover( function(){
        $('#prev, #next').addClass('magictime perspectiveLeft');
    },function(){
        $('#prev, #next').removeClass('perspectiveLeft');
        $('#prev, #next').addClass('perspectiveLeftRetourn');
    });
});

也许这会更好。