一个 jQuery 动画停止另一个动画

Question

编辑 - 已解决。解决方案在底部。

整个下午我都在用头撞砖墙。不是 jQuery 的天才，所以 apols 如果已经有答案了 - 我不知道要搜索什么，而且我花了时间搜索！

我正在尝试在一页上运行两个动画。第一个是 mouseenter、mouseleave 函数，提供四向滑动门效果：

$('.qitem').each(function () {

        //grab the anchor and image path
        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');

        //remove the image
        $('img', this).remove();

        //append four corners/divs into it
        $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');

        //set the background image to all the corners
        $(this).children('div').css('background-image','url('+ img + ')');

        $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:posHeight});   
        $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:posHeight});    
        $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:posHeight}); 
        $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:posHeight}); 

    }).mouseenter(function () {

        //animate the position

        $(this).find('div.topLeft').stop(false,true).animate({top:negHeight, left:neg}, {duration:speed_out, easing:style_out}); 
        $(this).find('div.topRight').stop(false,true).animate({top:negHeight, left:outHeight}, {duration:speed_out, easing:style_out});    
        $(this).find('div.bottomLeft').stop(false,true).animate({bottom:negHeight, left:neg}, {duration:speed_out, easing:style_out});   
        $(this).find('div.bottomRight').stop(false,true).animate({bottom:negHeight, left:outHeight}, {duration:speed_out, easing:style_out}); 

    }).mouseleave(function () {

        //put corners back to the original position
        $(this).find('div.topLeft').stop(false,true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});   
        $(this).find('div.topRight').stop(false,true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});    
        $(this).find('div.bottomLeft').stop(false,true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in}); 
        $(this).find('div.bottomRight').stop(false,true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});  



    }).click (function () {

        //go to the url
        window.location = $(this).find('a').attr('href');   
    });

第二个是萤火虫效果，相关的动画代码在这里：

$.firefly.fly = function(sp) {

  $(sp).animate({
      top: $.firefly.random(($(window).height()-150)),  //offsets
      left: $.firefly.random(($(window).width()-150))
  }, (($.firefly.random(10) + 5) * 1000),function(){  $.firefly.fly(sp) } );

};

它们都可以完美地独立工作。然而，当我把它们结合起来时，事情就变得有点奇怪了。在我看来，萤火虫的工作原理是为每个萤火虫图像提供 40 个同步动画，并为每个萤火虫图像分配一个随机方向，并为所有“萤火虫”分配相同的随机持续时间。

现在，当我用鼠标输入第一个 jQuery 脚本时，它的“门”打开得很好，动画也正常工作。如果鼠标保持悬停在“qitem”元素上，那么似乎当萤火虫动画完成当前迭代时，将调用 mouseleave 事件。

第二个动画怎么能像这样影响第一个动画呢？我想可能 DOM 中存在某种“重置”，并且必须再次检测鼠标指针，因此看起来鼠标正在“离开”。

我希望我已经很好地解释了这一点 - 如果看起来有点混乱，请要求进一步澄清。

预先感谢您的任何帮助。

编辑 - 已解决

好的，明白了！

和往常一样，这些事情总是很简单。当你知道怎么做的时候！它正在阅读我在 stackoverflow 上可以找到的每个 jQuery mouseleave/mouseenter 线程，这让我找到了解决方案 - z-index。

当“萤火虫”移动时，它们悬停在与 mouseleave 事件链接的元素上，从而触发它。我所要做的就是确保 mouseleave div 的 z-index 高于萤火虫。简单的 ：-）