1

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

整个下午，我一直在用头撞砖墙。不是 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 比萤火虫高。简单的 ：-）

4

0 回答 0