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，您可以像下面这样做。此代码段可能会对您有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

更新：您的script标记太多了。您的script部分应该如下。这可以解决您的问题。

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

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

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

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

1 个答案: