javascript - 鼠标关闭时停止/反转动画(baraja jquery 插件)

Question

我已经为我需要创建的“网络应用程序”部分实现了 baraja jquery 插件。

我选择更改脚本并在悬停时展开卡片，而不是通过单击按钮展开卡片。从表面上看这是可行的，但如果您将鼠标悬停在卡片上并在动画完成之前快速后退，卡片将保持打开状态。然后，当您将鼠标悬停在“甲板”上时，它们会关闭。我在下面创建了一个代码笔来展示这一点:

http://codepen.io/moy/pen/OPyGgw

我试过使用 .stop(); 但它似乎对结果没有影响。谁能帮我解决这个问题？

此外，我希望平台在页面加载时打开，然后在一秒或两秒后关闭。我尝试使用 $( document ).ready() 包括 baraja.fan 调用但这并没有触发它 - 有什么想法吗？

Answer 1

这个真的让我很高兴 ;) 尝试了几件事，但是 - 如前所述 - 插件不期望更快地获得关闭动画调用，然后开始动画将运行。

所以最后我为您构建了以下内容。 - 打开风扇，文件就绪 - 为 mouseleave 创建超时，等待打开动画持续时间，然后再关闭它 - 当 mouseleave 元素时你会有 400ms 的延迟，但它会关闭，即使你已经快了......

    $(document).ready(function () {

    if ($("#baraja-el").length) {
        var $el = $('#baraja-el');
        baraja = $el.baraja();
    }

    //initial open
    baraja.fan({
            speed: 400,
            easing: 'ease-in-out',
            range: 80,
            direction: 'right',
            origin: {
                x: 0,
                y: 0
            },
            center: true
        });

    $('.baraja-container').addClass('open');

    // navigation
    $('#baraja-prev').on('click', function (event) {
        baraja.previous();
        $('.baraja-container li').each(function () {
            if ($(this).css('z-index') === "1000") {
                $(this).addClass('visited');
            }
        });
    });

    $('#baraja-next').on('click', function (event) {
        baraja.next();
        $('.baraja-container li').each(function () {
            if ($(this).css('z-index') === "1010") {
                $(this).addClass('visited');
            }
        });
    });

    $('.baraja-container').hover(function (event) {
        if(!$(this).hasClass('open'))
        {
            $(this).addClass('open');
            baraja.fan({
            speed: 400,
            easing: 'ease-in-out',
            range: 80,
            direction: 'right',
            origin: {
                x: 0,
                y: 0
            },
            center: true
        });
        }

    }, function (event) {
    curBarCon = $(this);
    setTimeout(function(){
            curBarCon.removeClass('open');
            baraja.close();
}, 400);

    });

    $('.baraja-container li').click(function () {
        $(this).addClass('visited');
    });

});

因为我摆弄了你的codepen，你应该在这里有工作版本:http://codepen.io/moy/pen/OPyGgw 但是......这真的没有完美的解决方案。我建议获得另一个插件或返工 baraja 以获得回调函数，这将测试动画当前是否正在运行并在需要时将它们出队。

请求， E