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中，这也有助于加快速度。使用opacity:0.7;和display:none;设置初始CSS 现在应该工作得多了。

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;
}

在悬停上创建背景

1 个答案: