如何解决 mouseenter/mouseleave 问题

Question

我需要帮助来解决一些 mouseenter/mouseleave 问题。 这是一个视觉示意图：

所以，有这个垂直按钮滑块。当您单击这些按钮中的任何一个时，会弹出一个“灯箱”div 以及一个背景白色 div，与滑块容器重叠。如果我再次单击灯箱 div，它会关闭并且一切都恢复到默认状态。问题是按钮的 mouseenter/mouseleave 事件妨碍了操作，导致了一些问题。

这是 jQuery 代码：

function rocksType_mouseEvents_run(){

    // Mouseenter events
    $('.rocksType_DBitems_container').on('mouseenter', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.2%', 'margin-bottom':'1.2%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'110%', 'color':'rgba(0, 0, 0, 1)'}, 100, 'swing');
    });

    // Mouseleave events
    $('.rocksType_DBitems_container').on('mouseleave', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.1%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 0.5)'}, 100, 'swing');
    });

    // Click events
    $('.rocksType_DBitems_container').on('click', '> div:not(.rocksType_highlighted)', function(){

      // De-highlight currently rocksType_highlighted item
      function dehighlight_clickedRocksType(){
        $('.rocksType_DBitems_container > div.rocksType_highlighted').removeClass('rocksType_highlighted').stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.2%'}, 300, 'swing')
        .find('p').stop().animate({'font-size':'73%'}, 150, 'swing',
          function(){
            $(this).stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%', 'opacity':'0.3'}, 300, 'swing')
            .find('p').stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 1)'}, 150, 'swing');
          }
        );
      }

      // De-highlight currently rocksType_highlighted item
      dehighlight_clickedRocksType();

      // Highlight clicked item
      $(this).addClass('rocksType_highlighted').stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%'}, 300, 'swing')
      .find('p').stop().animate({'font-size':'73%'}, 300, 'swing',
        function(){
          $(this).stop().animate({'font-size':'110%', 'color':'rgba(255, 255, 255, 0.5)'}, 300, 'swing')
          .parent().stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.3%', 'margin-bottom':'1.3%', 'opacity':'1'}, 300, 'swing',
            function(){
              $('.rocksType_DBitem_lightbox').fadeIn(1000);
              $('.rocksType_lightboxBackground').fadeIn(1000);
              $('.rocksType_DBitem_lightbox').one('click', function(){
                $(this).fadeOut(300);
                $('.rocksType_lightboxBackground').fadeOut(300);
                // De-highlight currently rocksType_highlighted item
                dehighlight_clickedRocksType();
              });
            }
          );
        }
      );

    });

  }

  rocksType_mouseEvents_run();

...和FIDDLE。

谢谢。

佩德罗

Answer 1

做了一个小提琴http://jsfiddle.net/crEHc/1/ 将灯箱的 div 放在容器外面，发现一个错字（“click”.... 而不是 on("click"...

$('.rocksType_DBitem_lightbox').one('click', function(){