mouseenter/mouseleaveの問題を解決するには

Question

私はいくつかのmouseenter/mouseleaveの問題を解決するのに助けが必要です。

ので、この垂直ボタンスライダーがあります： はここに視覚的な概略図です。これらのボタンのいずれかをクリックすると、スライダコンテナに重なる背景の白いdivと一緒に「ライトボックス」divがポップアップします。もう一度ライトボックスdivをクリックすると、閉じられ、すべてがデフォルトの状態に戻ります。問題は、ボタンのmouseenter/mouseleaveイベントが途切れることで、いくつかの問題が発生していることです。

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：

はここでjQueryのコードです。

Thanx。

フィドルhttp://jsfiddle.net/crEHc/1/ が の代わりに、（「クリック」に....（「クリック」コンテナoutisdeライトボックスのためのdivを取り、タイプミス1を発見したメイドペドロ

Answer 1

...

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