关闭

jQuery动画效果

144人阅读 评论(0) 收藏 举报
分类:
$(function(){
	   /*$('.button').click(function(){
	   		 $('#box').animate({
	   		 	  left:'+=300px'
	   		 	}, 3000);
	   	});*/
	   	// stop()停止 不带任何参数只是停止第一个列队动画,接下来的列队会自动执行完
	   	$('.stop').click(function(){
	   		 $('#box').stop(true);//带参数 第一个true 是停止当前队列,并且清除,接下来的对列 //第二个true 停止后会跳到最后的位置上默认值为false
	   	});
	   	/*$('.button').click(function(){
	   		 $('#box').animate({
	   		 	  left:'+=300px'
	   		 	}).animate({top:'+=300px'}).delay(3000);
	   	});*/
	   	//不停的调用自己
	   	$('#box').slideToggle('slow',function(){
	   			 $(this).slideToggle('show', arguments.callee);
	    });
	   	$('.ani').click(function(){
	   		   //$('#box').css('background','orange');
	   		   $(':animated').css('background','orange');
	   		});
	   		$.fx.interval = 200;
	   	$('.button').click(function(){
	   		 $('#pox').toggle(3000, arguments.callee);
	   	});
	   	
	});




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>
	<input type="button" class="stop" value="停止"></input>
	<input type="button" class="ani" value="正在执行的运动"></input>
 
  <div id="box">
  	box</div>
  <div id="pox">
  	pox</div>

</body>
</html>

CSS:


#box{
	 width:100px;
	 height:100px;
	 background:red;
	/* display:none; /**切换使用*/
	}

#pox{
	 width:100px;
	 height:100px;
	 background:green;
	/* display:none; /**切换使用*/
	}


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

23、使用jQuery实现动画效果(原理:改变CSS)

一、设置显隐动态效果 CSS支持两种方法显示或隐藏元素,即使用visibility或display属性方法,它们控制元素显示或 隐藏的效果相同,但是结果不同。 1、visibility 属性在隐...
  • xuxianmei
  • xuxianmei
  • 2014-07-09 09:11
  • 1753

jQuery/CSS3炫酷动画效果插件 animate

jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用,...
  • ejinxian
  • ejinxian
  • 2016-08-26 09:21
  • 3695

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

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

jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果

  • 2015-05-23 16:26
  • 34KB
  • 下载

jquery的动画效果

  • 2015-02-25 10:55
  • 30KB
  • 下载

jQuery动画效果多功能菜单

  • 2015-08-07 10:42
  • 204KB
  • 下载

第14章 jQuery的动画效果

  • 2017-07-16 09:20
  • 160KB
  • 下载

jQuery鼠标悬停导航底部动画效果

  • 2016-01-27 16:20
  • 35KB
  • 下载

jQuery动画效果多功能

  • 2015-08-07 11:23
  • 1.94MB
  • 下载

jQuery图片排列动画效果

  • 2011-12-26 10:37
  • 238KB
  • 下载
    个人资料
    • 访问:245354次
    • 积分:5675
    • 等级:
    • 排名:第5361名
    • 原创:341篇
    • 转载:13篇
    • 译文:0篇
    • 评论:27条
    感谢打赏 支付宝二维码
    支付宝
    微信公众号 欢迎关注
    微信
    发福利啦 支付宝扫码有红包
    支付宝
    最新评论