Как добавить эффект скольжения вверх/вниз к div?

Question

Я использую asp.net mvc5 с razor engine. Я хочу добавить slide up и slide down эффекты к div. Сегодня я провожу много часов, но я не мог. Я использовал множество кодов jquery, но они не работали. Я не знаю, почему Jquery не работал в моем проекте. Я очень смущен. пожалуйста, помогите мне, как я могу добавить slide upslide 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>

Update: У вас слишком много script тега. Ваш раздел script должен понравиться следующим. Это может решить вашу проблему.

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

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

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