关闭

jQuery 自定义动画

152人阅读 评论(0) 收藏 举报
分类:

jQuery 自定义动画


HTML :

<!DOCTYPE HTML>
<html>
<head>
<title>Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.12.0.min.js"></script>
<script src="demo.js"></script>
<link rel="stylesheet" href="demo.css">
</head>

<body>
	<!--<input type="button" class="up"  value="上"></input>
	<input type="button" class="down"  value="下"></input>
	<input type="button" class="toggle" value="切换"></input>-->
	
	<input type="button" class="button" value="按钮"></input>

 
  <div id="box">
  	box</div>

</body>
</html>



CSS:

#box{
	 width:100px;
	 height:100px;
	 background:red;
	 position:absolute;
	/* display:none; /**切换使用*/
	}
	
.test{
	 padding:5px; 
	 margin-right:5px; 
	 background:orange;
	 float:left; 
	 display:none;
	}



JS:

$(function(){
	 // 必传参数css  2000ms 执行完毕  固定位置
	   /* $('.button').click(function(){
	      $('#box').animate({
	      	width:'200px',
	      	height:'200px',
	      	background:'orange',
	      	opacity:'0.5', 
	      	fontSize:'50px'
	      },2000 ,function(){
	      	alert("执行完毕");
	      	}); 	
	   });*/
	   
	   //定位位置使用
	   /*$('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'300px',
	   	  	 top:'200px'
	   	  	}, 'slow');
	   	});*/
	   	//移动每次加100
	   /*	$('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'+=100px'
	   	  	}, 'slow');
	   	});*/
	    //实现列队动画, 回调函数 进行嵌套
	    /*$('.button').click(function(){
	    	$('#box').animate({
	    		left:'+=100px'
	    		},'slow', function(){
	    		 $('#box').animate({
	   	  	 top:'+=100px'
	   	  	  }, 'slow');
	    		});
	    });*/
	    //在同一个元素的基础上使用顺序连缀执行 $('#box').animate({}); $('#box').animate({}); $('#box').animate({});
	   /* $('.button').click(function(){
	   	  $('#box').animate({
	   	  	 left:'+=100px'
	   	  	}, 'slow').animate({top:'+=100px'}).animate({width:'+=100px'});
	   	});*/
	    //同一个的基础上可以实现列队,但是不同的是不列队的, 如果想不同元素也实现列队方式效果必须使用嵌套方式
	    //css不是动画方法,会先执行css里面再执行slideDown 和slideUp(); 如果要实现使用queue
	    $('.button').click(function(){
	   	  //$('#box').slideDown().slideUp().css();
	   	  $('#box').slideUp().slideDown('slow', function(){
	   	  	// 如果要清理列队, 即不再执行后续的连缀方法
	   	  	  // $(this).clearQueue();
	   	  	}).queue(function(){
	   	  	  $(this).css('background','orange');
	   	  	  //如果说还要执行一个方法在下面加next()
	   	  	 // next(); 1.4 版本后才有,可能有些低版本不实现
	   	  	 $(this).dequeue();
	   	  	}).hide();
	   	});
	   	
	   	
	    
	    
	});


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jquery自定义动画animate()

在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行。但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash。这里 说的取代是网页特效...
  • dxh_0829
  • dxh_0829
  • 2015-04-16 15:57
  • 1148

jQuery停止动画和判断是否处于动画状态(转)

1、停止元素的动画 很多时候需要停止匹两己元素正在进行的动画,例如上例的动画,如l果需要在某处停止动画,需要使用stop()方法。stop()方法的语法缩构为: stop([clearQueue]...
  • dragoo1
  • dragoo1
  • 2015-09-23 15:21
  • 3721

jQuery中常用动画效果函数(日常整理)

jQuery的效果函数列表:   animate():对被选元素应用“自定义”的动画。   clearQueue():对被选元素移除所有排队的函数(仍未运行的)。   delay()...
  • Toleranty
  • Toleranty
  • 2016-10-08 21:22
  • 614

jQuery操作动画队列

1.前言 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。 jQuery提供了以下几...
  • owen_william
  • owen_william
  • 2016-05-07 20:35
  • 2467

jQuery 动画效果,消失,显现,渐出,渐入

jQuery 动画效果,消失,显现,滑动消失,滑动显现,滑动切换,渐出,渐入,淡化,移动
  • shuair
  • shuair
  • 2017-04-14 16:52
  • 1300

jQuery动画序列

**这里写代码片JQuery中的动画序列queue(),dequeue(),和stop()如下例: div.show("slow").animate({left:'+=300'},2000).sl...
  • allbycode
  • allbycode
  • 2016-12-16 14:57
  • 581

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil...
  • xiangzhihong8
  • xiangzhihong8
  • 2015-12-08 18:43
  • 2663

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each)

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index)
  • anfangw
  • anfangw
  • 2016-12-16 16:47
  • 3168

23个漂亮的jQuery文字动画效果教程示例

Apple-like Retina Effect With jQuery Check this tutorial to know how the author has turned a ...
  • maikforever
  • maikforever
  • 2013-07-11 21:29
  • 1704

7个炫酷的jQuery动画插件及源码

1、jQuery书本翻页3D动画特效 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真。今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意...
  • vector5210
  • vector5210
  • 2014-10-23 13:42
  • 587
    个人资料
    • 访问:246616次
    • 积分:5687
    • 等级:
    • 排名:第5332名
    • 原创:341篇
    • 转载:13篇
    • 译文:0篇
    • 评论:27条
    感谢打赏 支付宝二维码
    支付宝
    微信公众号 欢迎关注
    微信
    发福利啦 支付宝扫码有红包
    支付宝
    最新评论