jquery学习--动画

来源：互联网发布：java开发pc客户端编辑：程序博客网时间：2024/06/05 06:32
简单的学习了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>
0 0