Javascript 实现现有代码以创建滑出页脚

我正在尝试添加一个滑出页脚。类似于GunsNRoses网站的东西。我想在页面上有内容，但我不想让它从设计中消失。所以我想使用jQuery添加一个滑出页脚。我在[JS FIDLE]（“滑出页脚”）上找到了这段代码 我试图在代码中实现它，但遇到了一些困难。我非常感谢你的帮助。我创建了一个代码笔，所以你可以看看代码。提前谢谢

 <footer class="navbar-fixed-bottom">

    <div id="footerSlideContainer">
      <div id="footerSlideButton"></div>
      <div id="footerSlideContent">
        <iframe width="40%" height="60" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/226657681&amp;color=999999&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
        <p class="pull-left hidden-xs"> &copy; Copyright </p>

        <div class="pull-right">
          <div class="navbar-text pull-right">
            <a href="https://www.facebook.com/alwayssunny/?fref=ts" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>
            <a href="https://twitter.com/alwayssunny?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
            <a href="https://soundcloud.com/allisondanger/its-always-sunny-in-philadelphia-intro" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
          </div>
        </div>
       </div>
    </div>
  </footer>

    <script>(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '50px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        });     
    });
</script>

©；版权所有
（函数（$）{
var open=false；
$（“#页脚滑动按钮”）。单击（函数（）{
如果（打开===错误）{
$（'#footerSlideContent'）。设置动画（{height:'50px'}）；
$（this.css（'backgroundPosition'，'bottomleft'）；
开放=真实；
}否则{
$（'#footerSlideContent'）。设置动画（{height:'0px'}）；
$（this.css（'backgroundPosition'，'top left'）；
开=假；
}
});     
});

我编辑了您的代码笔，并做了一些更改，如果您使用“navbar fixed bottom”类将jQuery转换应用于包含页脚，则可以更轻松地应用幻灯片

CSS:

jQuery：

var open = false;
$('#footerSlideButton').click(function () {
   if(open === false) {
      $('.navbar-fixed-bottom').animate({ height: '100px' });
      $(this).css('backgroundPosition', 'bottom left');
      open = true;
   } else {
      $('.navbar-fixed-bottom').animate({ height: '0px' });
      $(this).css('backgroundPosition', 'top left');
      open = false;
   }
});   

看看我的代码笔：

---

好的，非常感谢您的帮助。我试过你的调整，效果很好。我非常感激，我非常感激。再次感谢！

var open = false;
$('#footerSlideButton').click(function () {
   if(open === false) {
      $('.navbar-fixed-bottom').animate({ height: '100px' });
      $(this).css('backgroundPosition', 'bottom left');
      open = true;
   } else {
      $('.navbar-fixed-bottom').animate({ height: '0px' });
      $(this).css('backgroundPosition', 'top left');
      open = false;
   }
});