如何為div添加上/下滑動效果？

Question

我正在使用帶有razor engine asp.net mvc5 。我想向div添加slide up和slide down效果。 我今天花了很多時間來做，但是我做不到。 我使用了很多jquery代碼，但是它們沒有用。 我不知道為什么Jquery在我的項目中不起作用。 我很困惑。 請幫助我如何向此代碼添加slide up slide down效果？ 這是我的代碼：

<script type="text/javascript">
    var button = document.getElementById('btnShow');
    button.onmouseover = function () {
    var div = document.getElementById('MyFooter');
    div.style.display = 'block';
  };
</script>

<script type="text/javascript">
    var button = document.getElementById('btnHide');
    button.onmouseover = function () {
    var div = document.getElementById('MyFooter');
    div.style.display = 'none';
          };
</script>

謝謝 。

Answer 1

使用jQuery您可以按照以下步驟進行操作。 此代碼段可能會對您有所幫助。

 $('#btnShow').mouseover(function() { $('#MyFooter').slideDown(); }); $('#btnHide').mouseover(function () { $('#MyFooter').slideUp(); }); 

 #MyFooter { height: 200px; width: 200px; border: 1px solid #000; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="btnShow" value="Show"/> <input type="button" id="btnHide" value="Hide"/> <br/><br/> <div id="MyFooter"></div> 

更新：您的script標記太多。 您的script部分應如下所示。 這樣可以解決您的問題。

@section scripts{
     <script type="text/javascript">
        $(document).ready(function () {
           $("footer").hide();

           $('#btnShow').mouseover(function () {
               $('#MyFooter').slideDown();
           });

           $('#btnHide').mouseover(function () {
               $('#MyFooter').slideUp();
           });
        });
    </script>
}