http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434500456006abd6381dc3bb439d932cb895b62d9eee000
show / hide
var div = $('#test-show-hide');
div.hide(3000); // 在3秒钟内逐渐消失
示例代码
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('#test-button').click(function() {
var div = $('#test-show-hide');
div.hide(3000);
setTimeout(function() {
div.show('slow');
}, 3000);
});
});
</script>
</head>
<body>
<div id="test-show-hide" style="width: 128px; height: 128px; background-color: #ccc; )"></div>
<button id="test-button">Button</button>
</body>
</html>
var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示
slideUp / slideDown
var div = $('#test-slide');
div.slideUp(3000); // 在3秒钟内逐渐向上消失
fadeIn / fadeOut
var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒内淡出
自定义动画 animate()
var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值
var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});
串行动画 delay()
var div = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div..hide().
slideDown(2000)
.delay(1000)
.animate({
width: '256px',
height: '256px'
}, 2000)
.delay(1000)
.animate({
width: '128px',
height: '128px'
}, 2000);
}
</script>
练习
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function() {
var trs = [
['Bart Simpson', 'bart.s@primary.school', 'Springfield', 'Active'],
['Michael Scofield', 'm.scofield@escape.org', 'Fox River', 'Locked'],
['Optimus Prime', 'prime@cybertron.org', 'Cybertron', 'Active'],
['Peter Parker', 'spider@movie.org', 'New York', 'Active'],
['Thor Odinson', 'thor@asgard.org', 'Asgard', 'Active']
];
var tbody = $('#test-table>tbody');
var i;
for(i = 0; i < trs.length; i++) {
tbody.append('<tr><td>' + trs[i].join('</td><td>') + '</td></tr>');
}
i = 0;
$('#test-add-button').click(function() {
if(i >= trs.length) {
i = 0;
}
tbody.append('<tr><td>' + trs[i].join('</td><td>') + '</td></tr>');
i++;
});
$('#test-button').click(function() {
function deleteFirstTR() {
var tr = $('#test-table>tbody>tr:visible').first();
tr.fadeOut('slow', () => this.remove());
}
deleteFirstTR();
});
});
</script>
</head>
<body>
<table id="test-table" class="uk-table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="submit" id="test-add-button">Add</button>
<button type="submit" id="test-button">Remove</button>
</body>
</html>
