2018-06-27

jquery特殊效果

1.jquery特殊效果

fadeIn() 淡入

$btn.click(function(){

$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});

});

fadeOut() 淡出
fadeToggle()切换淡入淡出
hide()隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle()依次展开或卷起某个元素

2.尺寸相关,滚动事件

1、获取和设置元素的尺寸

width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offset();
获取元素的lefttop,位置

1.浏览器的宽高:$(window).width();

2.文档的宽高:$(document).width();

3.获取页面滚动的距$(document).scrollTop();$(document).scrollLeft();

4.监听页面滚动距离$(window).scroll(function(){ })

3.jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

$(function(){
$('.listli').each(function(i){
$(this).html(i);
})
})
......

4.回到顶部固定写法：

$("html,body").animate({"scrollTop":0})