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
})
}
});
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]