So lösen Sie mouseenter/mouseleave Probleme

Question

Ich brauche Hilfe bei der Lösung einiger Probleme Mouseenter/mouseleave. Hier ist ein visuelles Schema:

So gibt es diese vertikalen Tasten Schieber. Wenn Sie auf eine dieser Schaltflächen klicken, wird ein "Lightbox" -Div zusammen mit einem weißen Hintergrund-Div angezeigt, der den Schieberegler-Container überlappt. Wenn ich erneut auf die Lightbox div klicke, wird sie geschlossen und alles kehrt in den Standardzustand zurück. Das Problem ist, dass die mouseenter/mouseleave-Ereignisse der Schaltfläche im Weg stehen und einige Probleme verursachen.

Hier ist der jQuery-Code:

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

... und ein FIDDLE.

Danke.

Pedro

Answer 1

Hergestellt eine Geige http://jsfiddle.net/crEHc/1/ die div für den Leuchtkasten outisde dem Behälter genommen und fand einen Tippfehler ein („Klick“ .... statt auf („Klick“ ...

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