jQuery基础知识点总结(DOM操作)

2020-05-27 18:14:02易采站长站整理

$(selector).show(“slow”);

// 用法三:
// 参数一可以是数值类型或者字符串类型
// 参数二表示:动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});

// 用法四:
// 不带参数,作用等同于 css(“display”, ”block”)
/* 注意:此时没有动画效果 */
$(selector).show();

【注意】:jQuery预设的三组动画效果的语法几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画执行完成后的回调函数。

第一个参数可以是:指定字符或者毫秒数

②hide方法


$(selector).hide(1000);
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

3.2 滑入滑出动画

 ①滑入动画效果


$(selector).slideDown(speed,callback);
// 注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)
$(selector).slideDown();

 ②滑出


// 作用:让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);

③滑入滑出切换动画效果


$(selector).slideToggle(speed,callback);
// 参数等同与"隐藏和显示"

4、淡入淡出动画

 ①淡入动画效果


// 作用:让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);

 ②淡出


// 作用:让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);

③淡入淡出切换动画效果


// 作用:通过改变不透明度,切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
// 参数等同与"隐藏和显示"

④改变不透明度到某个值

——与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值;并且时间参数是必需的!


// 作用:调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示:时长
// 第二个参数表示:不透明度值,取值范围:0-1
$(selector).fadeTo(1000, .5); // 0全透,1全不透

// 第一个参数为0,此时作用相当于:.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

jQuery提供的这几个动画效果控制的CSS属性包括:高度、宽度、不透明度。{height:400px; width:300px; opacity:.4;}

这三个CSS属性的共性是:属性值只有一个,并且这个值是数值(去掉单位后)。