Fare merkezi/mouseleave sorunları nasıl çözülür

Question

Bazı mouseenter/mouseleave sorunlarını çözme konusunda yardıma ihtiyacım var.

Yani, bu dikey düğmeleri kaydırıcı var: İşte görsel bir şematik var. Bu düğmelerden herhangi birine tıkladığınızda, bir "lightbox" div düğmesiyle birlikte arka plan beyaz div ile birlikte açılır. Işık kutusu div'unu tekrar tıklarsam kapanır ve her şey varsayılan duruma döner. Sorun, düğmenin mouseenter/mouseleave olaylarının yoluna girmesi ve bazı sorunlara yol açmasıdır.

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(); 

... ve bir FIDDLE:

İşte jQuery kod.

Thanx.

Pedro

keman http://jsfiddle.net/crEHc/1/ konteyner Outisde lightbox için div aldı ve bir ("tıklama" bir yazım hatası bulundu Yapılan

Answer 1

.... yerine ("click" üzerine bir ...

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