jQuery animieren div: Schaltfläche verschwindet (z-Index Fehler?)

Question

Ich verstehe nicht, warum dieser Code nicht funktioniert. Der Benutzer kann auf eine Schaltfläche klicken, um die sticky footer zu erweitern. Ich benutze jQuery, um die Fußzeile zu animieren (durch Erhöhung der Höhe von #site-footer). Nach dem Klick auf den Button ist ein Problem aufgetreten: Das #ask-offer div ist ausgeblendet.

können Sie das Problem unten:

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>

Haben Sie eine Idee?

Danke!

Answer 1

Fügen Sie einfach .css hinzu ("overflow", "visible"); auf Ihre jquery:

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

und

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