我无法解释为什么我的slideUp和slideDown无法正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<button class="btn btn-lg btn-success" type="button" id="show">Show</button>
<button class="btn btn-lg btn-danger" type="button" id="hide">Hide</button>
</div>
<br><br><br>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!-- EX1 -->
<!-- $('#hide').on('click', function() { -->
<!-- $('table').hide(); -->
<!-- }); -->
<!-- $('#show').on('click', function() { -->
<!-- $('table').show(); -->
<!-- }); -->
<!-- EX2 -->
<!-- $('#hide').on('click',function() { -->
<!-- $('table').fadeOut(2000); -->
<!-- }); -->
<!-- $('#show').on('click',function() { -->
<!-- $('table').fadeIn(2000); -->
<!-- }); -->
<script type="text/javascript">
$('#hide').on('click', function() {
$('.table').slideUp("slow", function(){
console.log('%c -------->> hide clicked <<--------', "color: green;");
});
});
$('#show').on('click', function() {
$('.table').slideDown("slow", function(){
console.log('%c -------->> show clicked <<--------', "color: green;");
});
});
</script>
</body>
</html>
我也可以在这里重现
https://jsfiddle.net/bheng/gef1ntLq/
我尝试了几乎所有版本的jQuery。
最佳答案
表格可能很挑剔，您不应直接在表格上使用任何动画效果。但是，如果将表打包到div中并在div上使用slideUp()和slideDown()，它会很好地工作。
这是您的jsFiddle的更新版本。