jquery之效果操作

jQuery操作之效果

效果一共分五大类

一.基本

二.滑动

三.淡入淡出

四.自定义

五.设置

咱们先来看一下基本类

一.基本又分为

show()

hide()

toggle()

html代码

123

css代码

div{
width: 100px;
height: 100px;
background: red;
display: none;
}

jquery代码

$("#btn").click(function(){
//显示div 3秒执行完
$("div").show(3000);
})

$("#btn1").click(function(){
//隐藏div 3秒执行完
$("div").hide(3000);
})

$("#btn2").click(function(){

//切换显示隐藏div 2秒执行完
$("div").toggle(2000);
})

效果如下图

二.滑动又分为

show()

hide()

toggle()

html和css代码都一样

jquery代码

$("#btn").click(function(){
//展开div
$("div").slideDown();
})

$("#btn1").click(function(){
//收缩div
$("div").slideUp();
})

$("#btn2").click(function(){

//切换展开收缩div
$("div").slideToggle();
})

效果图

三.淡入淡出又分为

fadeIn()

fadeOut()

fadeTo()

fadeToggle

css代码

div{
width: 200px;
height: 400px;
background: red;
display: none;
position:absolute;
top:0;
left:0;
}
input{
margin-top:420px;
}

jquery代码

$("#btn").click(function(){
//渐渐淡入
$("div").fadeIn(2000);
//两秒以后开始执行动画
$("div").fadeTo("slow",2000);
})

/$("#btn1").click(function(){
//渐渐淡出
$("div").fadeOut(2000);
})

$("#btn2").click(function(){

//切换淡入淡出div
$("div").fadeToggle(2000);
})

效果图

四.自定义(这个效果是最常用的一个效果，各种效果都能实现)

animate()

stop()

delay()

css代码

div{
width: 200px;
height: 400px;
background: red;
position:absolute;
top:0;
left:0;
}
input{
margin-left:700px;
}

jquery代码

$("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
$("#btn1").click(function(){
//终止进行中的动画效果
$("div").stop().animate()
})
$("#btn2").click(function(){
//延时动画效果
$("div").delay(500).animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})

效果图

五.设置

$.fx.off()

$.fx.interval()//相当于定时器

jquery代码

//暂停一切动画效果
$.fx.off=true;
$("#btn").click(function(){
//设置动画效果
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})