在悬停上创建背景

Question

我正在尝试创建与我的JSFIDDLE中显示的完全一致的功能，基本上是将鼠标悬停在div上，然后在该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-index和stop 模式背景是从一开始就在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; 
}