Question

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

而不是插件在点击按钮时传播卡片，我选择改变脚本并在悬停时展开卡片。从表面上看，这是有效的，但是如果你将鼠标悬停在卡片上并在动画完成之前快速退回，卡片将保持打开状态。然后当你将鼠标悬停在“甲板”上时，它们会关闭。我在下面创建了一个codepen来显示：

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

我尝试过使用.stop();，但似乎没有对结果产生影响。任何人都可以帮我这个吗？

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

Answer 1

这个让我感到非常震惊;）尝试了几件事，但是 - 正如已经说过的那样 - 插件并不期望更快地获得近距离动画调用，然后开始动画将会运行。

所以最后我为你建立了以下内容。 - 打开风扇，准备好文件 - 为mouseleave创建了一个超时，等待开始动画持续时间，然后关闭它 - 当mouseleave元素时你会有400ms的延迟，但它会关闭，即使你已经快速... ... / p>

    $(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来获取回调函数，这将测试动画当前是否正在运行并在需要时将它们出列。

rgrds， ë

鼠标关闭时停止/反转动画（baraja jquery插件）

1 个答案: