javascript - 在悬停时创建背景

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 的不必要调用modal-backdrop 从一开始就在 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;
}