jquery学习--动画

最新推荐文章于 2025-06-25 11:07:19 发布

原创最新推荐文章于 2025-06-25 11:07:19 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

JS_jQuery 专栏收录该内容

17 篇文章

订阅专栏

简单的学习了jquery中的动画的相关的知识，仅仅是简单的，具体的使用还要结合api的使用和实际情况。

还有没有涉及到的是插件的编写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learnJquery-6---->jquery动画</title>
	<script type="text/javascript" src="jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
	<style type="text/css">
		p{
			width: 300px;
			height: 300px;
			padding:10px;
			border: 1px solid #abcdef;
			 display: none; 
		}
		/* .2p{
			width: 300px;
			padding:10px;
			border: 1px solid #abcdef;
			display: none;
		} */

		div.div1{
			width:100px;
			height: 100px;
			background: #abcedf;
			position: absolute;
			left:0px;
			top: 300px;
		}
		#run{
			width: 50px;
			height: 50px;
			background: #f90;
			position: absolute;
			left:10px;
			top:100px;
		}

	</style>
</head>
<body>

	<button value="RUN!!!">RUN!!!</button>
	<input id="stop" type="button" value="stop" /><br />
	<input id="dequene" type="button" value="dequene" /><br />
	<input id="finish" type="button" value="finish" /><br />
	<div id="run"></div>

	<a id="1a" href="#">click</a>
	<p class="1p">
		这篇文章讨论了Java应用中并行处理的多种方法。从自己管理Java线程，到各种更好几的解决方法，Executor服务、ForkJoin 框架以及计算中的Actor模型。
	</p>

	<!-- <a class="2a" href="#">click</a>
	<p class="2p">
		这篇文章讨论了Java应用中并行处理的多种方法。从自己管理Java线程，到各种更好几的解决方法，Executor服务、ForkJoin 框架以及计算中的Actor模型。
	</p> -->


	<input id="div1" type="button" value="clickDIV" />
	<div class="div1"></div>

	<script type="text/javascript">
			//hover(function(),function())模仿鼠标移入和移除的事件,因此需要两个函数
			//trigger() 模拟某事件发生
			//triggerHandler()  模拟某事件发生 ,阻止冒泡


			/*$('#1a').click(function() {
				// $('p').hide();//传参数毫秒600看效果
				$('p.1p').hide('fast');//'fast' 'slow' 'normal'
			});*/


			/*$('#2a').click(function() {
				$('p.2p').show('fast');//'fast' 'slow' 'normal'
			});*/
		
	/*$('#2a').click(function() {
				$('p.2p').toggle();
			});*/
	
/*$('#1a').click(function() {
	//透明度从0到1
				$('p').fadeIn(1000);//'fast' 'slow' 'normal'
			});*/

/*$('#1a').click(function() {
				$('p').fadeOut(1000);//'fast' 'slow' 'normal'
			});*/
/*$('#1a').click(function() {
				$('p').fadeTo(1000,0.5, function(){
					alert('fadeto函数执行后回调的函数执行');
				});//'fast' 'slow' 'normal'
			});*/

/*$('#1a').click(function() {
				$('p').fadeToggle()
			});*/

//滑动动画
/*$('#1a').click(function() {
				$('p').slideDown('slow', function() {
					alert("slideDown()");
				});
			});*/
/*$('#1a').click(function() {
				$('p').slideUp('slow')
			});*/

//自定义动画
/*$('input[type=button]').click(function() {
	// alert("sdgs");
//必须要有position属性
	$('div.div1').animate({
		'left':800,
		'top':500,
		'opacity':0.4
	},3000,function(){
		//回调函数
		$(this).css('background', '#f90');
	});
});*/

//jquery动画队列

/*$('#1a').hover(function(){
	// $('p').slideDown();
	$('p').stop(false,true).slideDown();
},function(){
	// $('p').slideUp()
	$('p').stop(false,true).slideUp()
});*/


/*$('button').click(function(){
	$('#run').animate({
		'top':700
	},1000).animate({
		'left':1000
	},2000).animate({
		'top':100
	},1000).animate({
		'left':10
	},2000);
});*/
/*$('#stop').click(function(){
	//API
	// $('#run').stop(false,false);
	// $('#run').stop(true,false);
	// $('#run').stop(false,true);
	// $('#run').stop(true,true);
})*/

/*$('#dequene').click(function(){
	//API
	$('#run').dequeue();
})*/
/*$('#finish').click(function(){
	//API
	$('#run').finish();
})*/

//delay()

//Jquery.fx.interval()

//~~~~~~~~~~~~~~~~~~~~~jquery动画插件easing

/*$('#div1').click(function() {
	$('div.div1').animate({
		'left':'1000px'
	},1000,'easeOutBounce');
});*/


	</script>
</body>
</html>