gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:35:43 24 4
gpt4 key购买 nike

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

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

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

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

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

最佳答案

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

所以最后我为您构建了以下内容。- 打开风扇,文件就绪- 为 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

关于javascript - 鼠标关闭时停止/反转动画(baraja jquery 插件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27291779/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com