Question

我正在尝试在某些代码中使用一些魔术css类（http://www.minimamente.com/magic-css3-animations/）并尝试使用带有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

这是fiddle

似乎可以正常使用以下

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

也许这会更好。

使用jQuery添加时，Magic CSS3动画无法正常工作

2 个答案: