我不明白为什么这段代码不起作用。用户可以单击按钮以展开粘性页脚。我使用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>
&#13;
你有什么想法吗?
谢谢!
答案 0 :(得分:1)
只需将 .css(&#34;溢出&#34;,&#34;可见&#34;); 添加到您的jquery:
$('#site-footer').animate({ height: footerHeight }, 500).css("overflow", "visible");
和
$('#site-footer').animate({ height: 150 }, 500).css("overflow", "visible");