如何在jQuery中使动画在一段时间内不活动答案

【问题标题】：how to make animation inactive for some time period in jQuery如何在jQuery中使动画在一段时间内不活动
【发布时间】：2011-05-16 20:26:10
【问题描述】：

这里是我的问题http://jsfiddle.net/XnnvD/35/ 的 jsfiddle 链接（不太好用）

我会尝试解释问题所在，我在 jQuery 中有 3 组动画

1- 图像在一段时间后反弹并消失，如下所示：

$('#homePageImage').animate(
                    { top: '50px' },
                    { queue: false, duration: 1000, easing: 'easeOutBounce' });
$('#homePageImage').delay(3000).effect('drop', { direction: "right" });

2- 随机图片集.fadeIn()如下：

randNumArray = shuffle(randNumArray);
for (var i = 0; i < 9; i++)
{ $('#fs' + randNumArray[i]).delay(j += 200).fadeIn(j); }

3- 将鼠标悬停在这些图像上，将它们放大如下：

$(function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        });

问题： 如果用户在第一组动画完成之前悬停，图像不会完全.fadeIn()，因此部分/不可见

我想要什么： 我希望第 3 组（悬停放大）在我的第 1 组和第 2 组动画完成之前保持不活动状态，我该怎么做？

谢谢

【问题讨论】：

我不完全理解 - 但听起来在第二个动画完成之前不应触发悬停功能。与其延迟，不如在动画结束时使用事件启用悬停代码。
是的，用户在第二个动画结束之前不能悬停！
如何解绑悬停动画，动画结束后重新绑定？

标签： jquery animation delay user-inactivity

【解决方案1】：

将您的 Hover 函数放在这样的 SetTimeOut 函数中

setTimeout((function () {
            $("ul.thumb li").hover(function () {
                $(this).css({ 'z-index': '10' });
                $(this).find('img').addClass("hover").stop().animate({
                    marginTop: '-110px',
                    marginLeft: '-110px',
                    top: '50%',
                    left: '50%',
                    width: '174px',
                    height: '174px',
                    padding: '20px'
                }, 500);

            }, function () {
                $(this).css({ 'z-index': '0' });
                $(this).find('img').removeClass("hover").stop().animate({
                    marginTop: '0',
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '100px',
                    height: '100px',
                    padding: '5px'
                }, 500);
            });
        }), *Put time in miliseconds*);

所以这将确保在指定的时间段之前不会发生悬停！

【讨论】：

【解决方案2】：

能否尝试在第二个动画的背面调用悬停函数作为回调函数。基本来说：

$("#homePageImage").fadeIn("slow", function() {

// enable hover function

});

【讨论】：

第二个动画在循环中！
好的，在循环中检查是否是最后一次迭代的 if 语句怎么样。如果是这样，它将启用该功能。
不妨做 8 次迭代，分别调用第 9 次！
你最好保持循环完整以最小化代码，但是循环最后阶段的 if 应该没有问题。

【解决方案3】：

你不想使用回调吗：

$('image').fadeIn('fast', function() {
  $('image').hover(function() {do stuff...});
});

【讨论】：

第二个动画在循环中！
放入一个函数，调用该函数。
$('image').fadeIn('fast', function() { hoveringActive();}); function hoveringActive() {$('image').hover(stuff);}