隐藏 参数分别为 时间,匀速,触发执行函数,动画操作都可用
$('div').hide(1000,'linear', function () {
console.log(1);})
显示
$('div').show(1000)
切换
$('div').toggle(1000)
淡入
$('div').fadeIn(1000)
淡出
$('div').fadeOut(1000)
切换
$('div').fadeToggle(1000)
垂直滑入 隐藏
$('div').slideDown(1000)
划出 显示
$('div').slideUp(1000)
切换
$('div').slideToggle(1000)
自定义动画
$('button').click(function () {
$('div').animate({
left:'250px',
opacity:'0.5',
width:'250px',
height:'250px'
},3000)
})
立即停止动画 配合动画方法使用
$('div').stop() //例如$('div').stop().toggle(1000)
动画执行完停止
$('div').finish()
$('.get').click(function () {
$.get('http://10.7.176.87:8088/api/find', { //url
id: 1 //携带的参数
}, function (data) { //响应的参数
console.log(data);
})
})
$('.post').click(function () {
$.post('http://10.7.176.87:8088/api/login', {
username: 'admin',
password: 'admin'
},
function (res) {
console.log(res);
}
)
})
$('.ajax').click(function () {
$.ajax({
url: 'http://10.7.176.87:8088/api/find',
type: 'get',
data: {
id: 1
},
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error);
}
})
})
$('.ajax2').click(function () {
$.ajax({
url: 'http://10.7.176.87:8088/api/login',
type: 'post',
data: {
username: 'admin',
password: 'admin'
},
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error);
}
})
})
$('.jsonp').click(function () {
$.ajax({
url: 'http://10.7.176.87:8088/api/jsonp/list',
dataType: 'jsonp', //响应数据类型,默认json
jsonpCallback: 'callback', //后端接口数据存放的函数名
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error);
}
})
})
jquery动画
于 2021-12-30 19:58:01 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)