Question

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

整个下午，我一直在用砖头撞墙撞墙。不是jQuery的天才，所以如果已经有了这个问题的答案 - 我不知道该为什么要搜索，我花时间搜索了！

我想在一个页面上运行两个动画。第一个是mousenter，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'元素上，那么当firefly动画完成当前迭代时，似乎会调用mouseleave事件。

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

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

提前感谢您的任何帮助。

编辑 - 已解决

好的，明白了！

像往常一样，这些事情总是非常简单。当你知道怎么做！它正在读取我在stackoverflow上找到的每个jQuery mouseleave / mouseenter线程，这使我得到了解决方案 - z-index。

'fireflies'移动到悬停在链接到mouseleave事件的元素上的位置，因此触发它。我必须做的就是确保mouseleave div具有比萤火虫更高的z指数。简单： - ）

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

0 个答案: