jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)

jq样式操作和效果

1.样式

1.jq设置样式

$("div").css('属性','值');

2.jq排他思想

//多选一.排他思想,当前元素设置样式,其与兄弟清除样式
$(this).css("color","green");
$(this).siblings().css("color","");

3.链式编程

//链式编程是为了节省代码量
$(this).css("color"."green").siblings().css("color","");

4.隐式迭代

$(“div”).hide(); 页面中所有div全部隐藏,不用循环操作

给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们在进行循环,简化操作;

2.操作css方法

//1.参数只写属性名,返回的是属性值
var coo = $(this).css("color");

//2.参数是属性名,属性值用逗号分开,是设置一组样式,属性必须加引号,若值是数字可以不用加单位和引号
$(this).css("color","skyblue");

//3.参数可以是对象形式,可以设置多组样式,属性名和属性值用冒号分开,属性可以不用加引号
$(this).css({}"color":"pink","width":100,'height':"50px"})

3.设置类样式方法

//1.添加类
$("div").addClass("current");
//2.删除类
$("div").removeClass("current");
//3.切换类
$("div").toggleClass("current");

注意:

设置类样式方法比较适合样式多时操作,可以弥补css()不足;

原生js中className会覆盖元素原先里面的类名,jq里面类操作只是对指定类进行操作,不影响原先的类名;

4.jq效果

4.1显示隐藏

​ 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;

4.11显示

show([speed],[easing],[fn]);

显示参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.12隐藏

hide([speed],[easing],[fn]);

隐藏参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.13切换

toggle([speed],[easing],[fn]);

切换参数:

1.参数都可以省略,无动画直接显示;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.2滑入滑出

滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

4.21下滑

slideDown([speed],[easing],[fn]);

下滑效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.22上滑

slideUp([speed],[easing],[fn]);

上滑效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.23滑动切换

slideUp([speed],[easing],[fn]);

滑动切换效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.3淡入淡出

淡入淡出,见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

4.31淡入

fadeIn([speed],[easing],[fn]);

淡入效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.32淡出

fadeOut([speed],[easing],[fn]);

淡出效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.33淡入淡出切换效果

fadeToggle([speed],[easing],[fn]);

淡入淡出切换效果参数:

1.参数都可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

4.34渐进方式调整到指定的不透明

fadeTo([speed],opacity,[easing],[fn]);

效果参数:

1.opacity:透明度必须写,取值0-1;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

5.自定义动画

animate(params,[speed],[easing],[fn]);

参数:

1.params:更改的样式属性,以对象形式传递,必须写,属性名可以不带引号,若是复合属性采取驼峰命名法,其余参数可以省略;

2.speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或者表示动画时长的毫秒数(如:1000);

3.easing:用来指定切换效果,默认是"swing", 可用参数"linear";

4.fn:回调函数,在动画完成时执行的函数,每个元素执行一次;

6.停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

​ 停止动画排队的方法为：stop() ;

• stop() 方法用于停止动画或效果。
• stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

​ 总结: 每次使用动画之前，先调用 stop() ,在调用动画。

7.事件切换hover

hover([over,]out) over和out是两个函数;

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它