如何将向上/向下滑动效果添加到 div？

Question

我正在使用 asp.net mvc5 和 razor engine 。我想将 slide up 和 slide down 效果添加到 div 。我今天花了很多时间来做到这一点，但我做不到。我使用了很多 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 你可以像下面那样做。这段代码 sn-p 可能会对你有所帮助。

$('#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>
}