Создать Заставку на Hover

Question

В настоящее время я пытаюсь создать функциональные возможности точно, как показано в моем JSFIDDLE, в основном, чтобы парить над DIV, а затем, чтобы иметь фон под этим Див вместе с слайд вниз панель также над фоном. единственная проблема заключается в том, что функциональность очень глючная и едва работает в Internet Explorer.

Вот это JS:

function darken(panelOpen){ 
     if(panelOpen){ 
      if(jQuery('#menu-backdrop').length){ 
       jQuery("#menu-backdrop").stop().fadeIn(300); 
      }else{ 
       jQuery(document.body).stop().append(jQuery('<div id="menu-backdrop" class="modal-backdrop"></div>').css('opacity',0.7).hide().fadeIn(300)); 
      } 
     }else{ 
      jQuery(".modal-backdrop").stop().fadeOut(300); 
     } 
    } //Backdrop 

jQuery(document).ready(function(e) {  

    var bioId; 

    jQuery('.personnel').mouseover(function() { 

     jQuery(this).css('z-index','1050'); 

     darken(true); 

     bioId = '#personnel-bio-'+this.id.replace(/[^\d.]/g,''); 
     var bio = '#personnel-bio-'+this.id.replace(/[^\d.]/g,''); 
     if(jQuery(bio).is(':visible')){ 
     }else{ 
      jQuery(bio).slideDown(300); 
     } 
    }); //dropdown function 

    jQuery(".wrap").mouseleave(function() { 
     darken(false); 

     if(jQuery(bioId).is(':visible')){ 
      jQuery(bioId).slideUp(300); 
     }else{ 
     } 

     setTimeout(function() { 
      jQuery('.personnel').css('z-index','0'); 
     }, 300); 
    }); // slide up function 
}); 

и CSS:

.personnel { 
     position:relative; 
} 

.personnel-bio { 
    display:none; 
    padding:1.2em; 
    position:relative; 
    z-index:1050; 
    margin-bottom:15px; 
    background:#FFF; 
} 

И затем, наконец, HTML:

<div class="wrap"> 
<div id="personnel-1" class="pull-left personnel"> 
         <div class="personnel-inner"> 
          <div class="thumbnail"> 
           <img src="http://placehold.it/330x290"/> 
          </div> 
          <div class="thumbnail-title"> 
           <h4>LAbel</h4> 
          </div> 
         </div> 
        </div> 

<div class="clearfix"></div> 
<div id="personnel-bio-1" class="personnel-bio"> 
        <h5><strong>Pieter Strydom</strong></h5> 

        <p>loerm ipsum.</p> 
       </div> 
</div> 

Я не тихо уверен, что я делаю неправильно , Так что любая помощь вообще будет очень оценена.

Answer 1

Я прибрала код немного, удалены ненужные звонки z-indexstop и Модального-задник в DOM с самого начала теперь что также помогает ускорить процесс. Начальный CSS устанавливается на opacity:0.7; и display:none; Должен теперь работать намного больше жидкости.

http://jsfiddle.net/hBB97/2/

HTML:

<div id="menu-backdrop" class="modal-backdrop"></div> 
<div class="wrap"> 
    <div id="personnel-1" class="pull-left personnel"> 
     <div class="personnel-inner"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/330x290" /> 
      </div> 
      <div class="thumbnail-title"> 
       <h4>Label</h4> 
      </div> 
     </div> 
    </div> 
    <div class="clearfix"></div> 
    <div id="personnel-bio-1" class="personnel-bio"> 
     <h5><strong>Pieter Strydom</strong></h5> 
     <p>loerm ipsum.</p> 
    </div> 
</div> 

Javascript:

function darken(panelOpen, personnelContainer) { 
    if (panelOpen) { 
     personnelContainer.css('z-index', '1050'); 
     jQuery(".modal-backdrop").fadeIn(300); 
    } else { 
     jQuery(".modal-backdrop").fadeOut(300); 
     personnelContainer.css('z-index', '0'); 
    } 
} //Backdrop 

jQuery(document).ready(function (e) { 

    var bioId; 

    jQuery('.personnel').mouseover(function() { 

     darken(true, $(this)); 

     bioId = '#personnel-bio-' + this.id.replace(/[^\d.]/g, ''); 
     var bio = '#personnel-bio-' + this.id.replace(/[^\d.]/g, ''); 
     if (jQuery(bio).is(':visible')) {} else { 
      jQuery(bio).slideDown(300); 
     } 
    }); //dropdown function 

    jQuery(".personnel").mouseleave(function() { 
     darken(false, $(this)); 

     if (jQuery(bioId).is(':visible')) { 
      jQuery(bioId).slideUp(300); 
     } 
    }); // slide up function 
}); 

CSS:

.personnel { 
    position:relative; 
} 
.personnel-bio { 
    display:none; 
    padding:1.2em; 
    position:relative; 
    z-index:1050; 
    margin-bottom:15px; 
    background:#FFF; 
} 
.modal-backdrop { 
    display:none; 
    opacity:0.7; 
}