jQuery 动画 div : button disapears (z-index bug? )

Question

我不明白为什么这段代码不起作用。用户可以单击一个按钮来展开粘性页脚。我使用 jQuery 为页脚设置动画(通过增加 #site-footer 的高度)。单击按钮后出现问题:#ask-offer div 被隐藏。

你可以看到下面的问题:

jQuery(document).ready(function($) {
    'use strict';

    var footer = $('#site-footer');
    var footerHeight = 0;

    $('#site-footer #ask-offer').on('click', function() {
        // Menu already open
        if (footer.hasClass('open')) {
            footer.removeClass('open');

            $('#site-footer').animate({ height: footerHeight }, 500);
        }
        // Menu close
        else {
            footer.addClass('open');

            footerHeight = $('#site-footer').height();
            $('#site-footer').animate({ height: 150 }, 500);
        }
    });

});

html, body {
  background: #000;
}

#wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 800px;
}

.wrapper {
    position: relative;
    width: 800px;
    margin: 0 auto;
}

footer#site-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 80px;
    width: 100%;
    background-color: #FFF;
    z-index: 300;
}

#site-footer #shadow {
    position: absolute;
    top: 8px;
    left: 35px;
    right: 35px;
    height: 40px;
    background-color: #FFF;
    -webkit-box-shadow: 0px -15px 35px -12px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px -15px 35px -12px rgba(0,0,0,0.5);
    box-shadow: 0px -15px 35px -12px rgba(0,0,0,0.5);
    z-index: 10;
}

#site-footer #ask-offer {
    position: absolute;
    top: -22px;
    left: 30px;
    height: 32px;
    width: auto;
    background-color: #FFF;
    z-index: 30;
}

#site-footer #ask-offer a {
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 0 70px;
    text-decoration: underline;
    color: #000;
}

#site-footer #ask-offer a > span {
    display: block;
    padding-top: 18px;
    text-align: center;
    text-transform: uppercase;
}

#site-footer #ask-offer a > span:before {
    content:"• ";
    display: inline-block;
    margin-right: 10px;
    font-size: 15px;
    color: #d3d3d3;
}

#site-footer #ask-offer a > span:after {
    content:" •";
    display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    color: #d3d3d3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <footer id="site-footer">
        <div class="wrapper">
            <div id="shadow"></div>
            <div id="ask-offer">
                <a href="javascript:;" title='Demander une offre'><span>Ask an offer</span></a>
            </div>
        </div>
    </footer>
</div>

你有什么想法吗？

谢谢!

Answer 1

只需将 .css("overflow", "visible"); 添加到您的 jquery 中:

$('#site-footer').animate({ height: footerHeight }, 500).css("overflow", "visible"); 

和

$('#site-footer').animate({ height: 150 }, 500).css("overflow", "visible");