ToB企服应用市场:ToB评测及商务社交产业平台

标题: jquery（三：jquery的动画） [打印本页]

作者: 锦通 时间: 2022-8-9 14:43
标题: jquery（三：jquery的动画）
动画
一：1.显示
show()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

2.代表方法执行完毕的回调函数

复制代码

默认的是：normal

$(function(){
$('#div1').show(2000，function(){
alert('动画执行完毕')
})
})

复制代码

一：2.隐藏
hide()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

2.代表方法执行完毕的回调函数

复制代码

默认的是：normal

$(function(){
$('div1').hide(2000，function(){
alert('动画执行完毕')
});
})

复制代码

一：3.切换
toggle（）

$('#toggle').click(function(){
$('#div1').toggle(1000);
})

复制代码

二：1.滑入
slideDown()
参数：1.代表动画执行的时长，毫秒数，也可以是代表时长的字符串 fast normal slow

2.代表方法执行完毕的回调函数

复制代码

默认的是：normal 400ms

$(function(){
$('#slideDown').click(function(){
$('div1').slideDown(2000,function(){
alert("滑出");
});
})
})

复制代码

二：2.滑出
slideUp（）

$(function(){
$('#slideUp').click(function(){
$('div1').slideUp(2000,function(){
alert("滑出了")；
});
})
})

复制代码

二：3.切换
slideToggle()

$('#slideToggle').click(function(){
$('#div1').slideToggle(1000);
})

复制代码

三：1.淡入
fadeIn()

$(function(){
$('#fadeIn').click(function(){
$('#div1').fadeIn(2000,function(){
alert("淡入")；
});
});
})

复制代码

三：2.淡出
fadeOut（）

$(function(){
$('#fadeOut').click(function(){
$('#div1').fadeOut(2000,function(){
alert("淡出")；
});
});
})

复制代码

三：3.切换
fadeToggle（）

$('#fadeToggle').click(function(){
$('#div1').fadeToggle(1000);
})

复制代码

三：4.淡入到哪里
fadeTo()

$(function(){
$('#fadeTo').click(function(){
$('#div1').fadeTo(2000,0.5);
});
})

复制代码

四：自定义动画
animate()
1.必选的对象，代表的是需要做动画的属性
2.可选的，执行动画的时长
3.可选的，代表的是缓动还是匀速 ----linear(匀速) swing（缓速）默认是swing
4.动画的完毕的回调函数

$(function(){
$('#lr800').click(function(){
$('#div1').animate({
left：800
}，2000,'linear',function(){
alert('动画执行完毕')；
})
})
})

复制代码

案例：
360开机动画：

$(function(){
$('#closeButton').click(function(){
$('#bottomPart').animate({
height:0;
},2000,function(){
$('#box).animate({
width:0
},2000);
}) ;
});
})

复制代码

动画队列与停止动画
1.是否清除队列
2.是否跳转到最终效果
默认不写就是全flase

$(function(){
$('#start').click(function(){
$('#div1').slideDown(2000),slideUp(2000);
}) ;
$('#stop').click(function(){
$('div').stop(true,true);
})
});

复制代码

offset()和position（）方法
offset();获取距离document的位置
position（）：兑现包含了top和left的值，距离它的定位父级的位置

$(function(){
$('#buttion').click(function(){
$('#son).offset
});
});

复制代码

scrollLeft和scrollTop方法
得到的数据是看不见的，卷出去的宽高
设置元素被卷曲出去的宽高

$(function(){
$('#buttion').click(function(){
$('#div1').scrollLeft();
}) ;
});

复制代码

案例
固定导航栏

$(function(){
//给页面设置一个滚动事件
//计算第一部分的高度
var s2=$('.classtop').height();
$(window).scroll(function(){
//获得卷曲的距离
var s1 =$(window).scrollTop();
if(s1>=s2){
//固定定位
$('.nav').css({
position:'fixed',
top:0,
letf:0
})
//设置第三部分的高度为第三部分的margin高度
var s3 =$('nav2').height();
$('#main').css({
position:''static',
top:0,
left:0
})
}else{
//固定定位
$('.nav').css({
position:'static',
top:0,
letf:0
})
//设置回原来的值
$('main').css({
marginTop:10
})
}
});
});

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)