jQuery之效果

jQuery

效果

1)基本
2)滑过
3)淡入淡出
4)自定义
5)设置

基本

show（显示隐藏的匹配元素。）

css代码

hello,hehe

jquery代码
$("p").show();

动画效果
1)$("p").show("slow");

2)$("p").show("normal");

3)$("p").show("fast");

4)$("p").show(1000,"swing",function(){
console.log("动画执行完成")
});

hide（隐藏显示的元素。）

css代码

hello,hehe

jquery代码
$("p").hide();

动画效果
1)$("p").hide(1000);

2)$("p").hide("slow");

3)$("p").show("normal");

4)$("p").show("fast");

toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。）

css代码

hello,hehe

jquery代码
$("#btn1").click(function(){
$("p").toggle("normal");
})

另一种（2个或者多个）

function a(){
alert("hehe1")
}
function b(){
alert("hehe2")
}
$("p").toggle(a,b);

滑过

slideDown（通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。）

css代码

hello,hehe

jquery代码
$("#btn1").click(function(){
$("p").slideDown()
});

slideUp（通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。）

css代码

hello,hehe

jquery代码
$("#btn2").click(function(){
$("p").slideUp()
});

slideToggle（通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
）

css代码

hello,hehe

jquery代码
$("#btn3").click(function(){
$("p").slideToggle()
});

淡入淡出

fadeIn（通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。）

html代码
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
css代码

jquery代码
$("input").first().click(function(){
$("div").fadeIn(5000);
})

fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）

html代码
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
css代码

jquery代码
$("input").eq(1).click(function(){
$("div").fadeOut(5000);
})

fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）

html代码
div{
width: 200px;
height: 200px;
background: red;
display: none;
}
css代码

jquery代码
$("input").eq(1).click(function(){
$("div").fadeTo(1000,0.5);
})

自定义

animate（用于创建自定义动画的函数。）

html代码
span{
background: red;
opacity:0;
position: absolute;
}
css代码
123
jquery代码
$("span").animate({
"width":"300px",
"opacity":"1",
"font-size":"3em",
"height":"100px",
"left":"300px",
"top":"100px"
},3000,function(){

console.log("动画完成")
})