如何解决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，发现一个拼写错误（“点击”.... 而不是（“点击”......

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