Question

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

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

1-图像在一些TimePeriod之后反弹并消失，如下所示：

$('#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组动画完成，我该怎么做？

由于

Answer 1

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

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

// enable hover function

});

Answer 2

你不想只使用回调：

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

Answer 3

将您的悬停功能放在像这样的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*);

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

如何在jQuery中使动画在一段时间内处于非活动状态

3 个答案: