动画
隐藏一个元素
无参数时,隐藏元素
speed:"slow","normal", "fast,表示从显示过渡到隐藏的速度,也可以直接写数字,1000代表1s。
function参数:在动画完成时执行的函数,每个元素执行一次。
easing参数:用来指定切换效果,默认是"swing",可用参数"linear"
综合应用,写一个点击显示/隐藏的小功能
<div class="container">
牛牛牛牛牛牛
</div>
<input type="button" value="点击">
......
var flag = true;
$("input").click(function(){
if(flag){
$(".container").hide(function(){
console.log("隐藏了");
flag = false;
});
} else {
$(".container").show(function(){
console.log("显示了");
flag = true;
});
}
});
//更简单的写法
$("input").click(function(){
$(".container").toggle();
});
-
滑动
-
淡入淡出
-
自定义
-
animate(params,[speed],[easing],[fn])1.8*
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
-
animate(params,[speed],[easing],[fn])1.8*
$(".container").animate({
width:500,
height:"300px",
marginLeft: "20%"
},2000);
stop([c],[j])1.7*
finish([queue])1.9+
-
设置
核心
-
jQuery 核心函数
-
jQuery 对象访问
-
数据缓存
-
队列控制
-
插件机制
小例子
一div里面现有内容"您好",我们需要改为"您好,中国。"请问怎么做?
function test(){
var div = $(".container");
div.text(div.text() + ",中国!")
}
test();
这样就可以了。这样是直接定义了一个函数,而jQuery的插件机制是在原有的jQuery里边添加一些属于jQuery的函数,让jQuery对象可以直接调用它。那我们如何修改上面的函数呢?
$.fn.extend({
add:function(value){
//有点类似于给对象里面的原型添加一个方法,因为是jQuery调用函数
this.text(this.text() + value)
}
});
$(".container").add(",中国!");
这里的this指向jQuery对象,注意this指向标签只存在于事件中
改成这样就可以了。可以将这种函数封装在一个js文件里边,在需要用到的时候引入(注意引入必须写在jQuery的引入后边)