Jquery——Day3(动画效果)

1、显示show()、隐藏hide()
显示与隐藏类似于HTML中对应的“display:none”和“display:block”

<input type="button" class="show" value="显示" /> 
<input type="button" class="hide" value="隐藏" /> 
<input type="button" class="toggle" value="切换" /> 
<div id="box">box</box>



若要点击button按钮,实现“div id=box”的显示与隐藏,对应的jquery代码如下:
$('.show').click(function(){
	$('#box').show();
});


$('.hide').click(function(){
	$('#box').hide();
});



对于两种show()、hide()交替使用,即toggle()表示切换效果
$(function(){
	$('.toggle').click(function(){
		$('#box').toggle(function(){
			$(this).hide();
		},function(){
			$(this).show();
		});
	});
});




2、fadeIn()、fadeOut()、fadeTo()不透明度
与show()方法不同的是,fadeIn()与fadeOut()方法只改变元素的不透明度。
fadeOut会在指定的一段时间内降低元素的不透明度,直到元素完全消失(“display:none”),fadeIn刚好相反。
若要在二者之间切换,可以使用toggle()方法
$(function(){
	$('.toggle').click(function(){
		$('#box').toggle(function(){
			$(this).fadeIn();
		},function(){
			$(this).fadeOut();
		});
	});
});




3、slideUp()、slideDown()向上向下
这两种方法只会改变元素的高度。
当一个元素的display属性值为“none”,调用slideDown()方法时,元素将由上至下延伸显示;
对于slideUp()刚好相反。

注意:对于jQuery中的任何动画效果,都可以指定3种速度参数,即“slow”、“normal”、“fast”(时间长度分别为0.6s、0.4s、0.2s),当使用速度参数时,需要加上引号,例如“slow("slow")”;若用数字作为时间参数时,就不需要加引号,例如“show(1000)”



4、自定义动画方法animate()
在jQuery中,可以使用animate()方法来自定义动画,语法结构如下:animate(params,speed,callback)
(1)params:一个包含样式属性及值的映射,如{proprety:"value1",property2:"value2"}
(2)speed:速度参数,可选;
(3)callback:在动画完成时执行的参数,可选。
由于自定义动画一般与“position”定位(绝对或相对)一起使用
#box{
	width:100px;
	height:100px;
	background:#ccc;
	position:absolute;
}


.test{
	padding:5px;
	margin-right:5px;
	background:#a2c;
	float:left;
	display:none;
}




若要用jQuery实现简单的动画效果,即需要下面代码操作:
$(function(){
	$('button').click(function(){
		$('#box').animate({
			left:300px
		},"slow");
	});
});




5、列队动画效果
更高级一点而言,可以使用“回调函数+列队动画”
$('button').click(function(){
	$('#box').animate({width:'300px'
		},function(){
		$('#box').animate({
			height:300px
		},function(){
			$('#box').animate({
				left:300px
			});
		});
	});
});




在同一元素基础上,使用连缀或顺序排列调用,可以实现队列动画。
$('.button').click(function(){
	$('#box').animate({width:'300px'})
		.animate({height:'300px'})
		.animate({opacity:'0.5'});
});



6、动画相关方法

(1)若要停止正在运行的动画,jQuery提供了一种方法:stop()

stop([clearQueue],[gotoEnd]);

二者都为boolean值,默认值为false。

clearQueue表示是否要清空未执行的动画队列;

                gotoEnd表示十分直接将正在执行的动画跳转到末状态。

$('.stop').click(function(){
	$('#box').stop(true,true);
});

(2)时间动画的延迟效果

在动画执行的过程中,如果想对动画进行延迟操作,可以使用delay()方法

$('.button').click(function(){
	$('#box').delay(1000)
              .animate({left:'300px'})
              .animate({botttom:'300px'}).delay(2000)
              .animate({width:'300px'})
              .animate({height:'300px'})
});
在上述代码中,第一个、第三个会出现也延迟。


(3)animate动画效果

一般情况下,常用animate()方法判断哪个div盒子在动

<input class="button" type="button" value="按钮" />
<input class="button" type="stop" value="停止" />
<div id="box">
	box
</div>
<div id="pox">
	pox
</div>

 

若要使得两个div盒子同时,一个一直在动(使用递归),一个保持静止的状态,

即只对第一个盒子“div id="box"”进行操作,使用“arguments.callee”

$('#box').slideToggle('slow',function(){
	$(this).slideToggle('slow',arguments.callee);
});


若要查找运动的动画,即需要在上述HTML代码中,添加按钮“animate”

“<input type="button" class="animate" value="查找正在运动的动画" />”

对该按钮进行jQuery解析,如下:

$('.animate').click(function(){
	$('div:animated').stop().css('background','red');
});


7、动画全局属性

jQuery提供了两种全局设置的属性,分别为:

(1)$.fx.interval:设置每秒运行的帧数(可以调整动画每秒运行的帧数)

(2)$.fx.off:关闭页面所有的动画(默认值为false)

$.fx.interval=200;
//$.fx.off=true;
	$('.button').click(function(){
		$('#box').toggle(1000);
});






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值