Jquery动画第二部分
效果图:
→→→→→→
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#div2
{
transform:rotate(30deg); /*transform 变换:旋转30度*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="display:none" class="panel">
只有点击按钮后我才会显示出来!!
</div>
<input id="Button1" type="button" value="点我" onclick="slideToggle() "/>
<br/>
<br/>
<br/> <input id="Button2" type="button" value="点我图片会动哦!!" />
<div style="background:#98bf21;height:100px;width:100px;position:absolute;" id="animate"> </div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<ol>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
</ol>
<input id="Button3" type="button" value="点我就会追加列表" /> <div id="css" style="background-color:red;width:200px;height:100px;">
<p id="p1">改变css属性</p>
</div>
<div id="div2" style="width:200px;height:100px;background-color:#00ff21">
</div>
</div>
</form>
</body>
</html>
<script src="jquery-1.11.2.min.js"></script>
<script> //简单的slide panel效果
function slideToggle()
{
$(".panel").slideToggle("slow");
} //简单的animate效果
$(document).ready(function () {
$("#Button2").click(function () {
var div = $("#animate"); //animate 驱动效果
div.animate({ height: '300px', opacity: '0.4' }, "slow");
div.animate({ width: '300px', opacity: '0.8' }, "slow");
div.animate({ height: '100px', opacity: '0.4' }, "slow");
div.animate({ width: '100px', opacity: '0.8' }, "slow");
})
}) //追加列表项
$(document).ready(function () {
$("#Button3").click(function () {
$("ol").append("<li>Appended item</li>"); //Append追加
//$("ol").before("<li>Appended item</li>"); //before 在……之前追加文本
//$("ol").after("<li>Appended item</li>");//before 在……之后追加文本
})
}) //改变css属性
$(document).ready(function () {
$("#css").click(function () {
alert($(this).css("background-color"));//获取颜色
$(this).css("background-color", "yellow"); //改变单个属性
//$("p").css({ "background-color": "blue", "font-size": "200%" }); //改变多个属性
})
}) $("div#intro .head") //选择器选取哪些元素?
//正确答案:id="intro" 的首个 div 元素中的 class="head" 的所有元素
</script>
Jquery动画第二部分的更多相关文章
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- jquery动画,基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- jQuery 动画的执行
jQuery 动画的执行 <%@ page language="java" import="java.util.*" pageEncoding=" ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- JQuery动画详解(四)
一:基本动画show()显示隐藏的匹配元素.这个就是 'show( speed, [callback] )' 无动画的版本.如果选择的元素是可见的,这个方法将不会改变任何东西.无论这个元素是通过hid ...
随机推荐
- PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解
uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了解,所以百度了一下,发现一篇帖子有点意思,转发过来做个记录. 在php中, ...
- linux关闭服务的方法
本文介绍下,在linux下关闭服务的方法,主要学习chkconfig的用法,有需要的朋友参考下. 先来看一个在linux关闭服务的例子,例如,要关闭sendmail服务,则可以按如下操作. 例1, 复 ...
- JDBC 简介
[摘要] 1) JDBC : (Java Database Connectivity ,java数据基础连接)是标准的Java 访问数据库的API.即Java数据库编程接口,是一组标准的Java语言中 ...
- ENVI栅格文件增强后将LUT保存完输出img图像进行分类
ENVI栅格文件储存 图像原始的DN(Digital Number)值记录图像的光谱信息,不能轻易更改。在窗口中显示的一般是经过拉伸等增强处理的LUT上的灰度值,在保存文件时,就有不同的方式。 1. ...
- 【学习总结】Info.plist和pch文件的作用
Info.plist 建立一个工程后,会在Supporting files文件夹下看到一个“Info.plist”的文件,该文件对工程做一些运行期的配置,非常重要,不能删除 项目中其他Plis ...
- mybatis generator自动生成 实体类, sqlmap配置文件 详细介绍
我使用的是Eclipse Luna 装了自己常用的插件, generator也是其中一个推荐下载 MyBatis_Generator_1.3.1.zip离线安装包 <?xml version=& ...
- 关于WinForm引用WPF窗体
项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...
- VS 2005部署应用程序提示“应用程序无法正常启动( 0x0150002)” 解决方案
遇到这个问题,一定是缺少了CRT.MFC.ATL的DLL,不同版本的VS是不一样的.系统自带这些库的Release版,如果没有自带,打补丁就有了:系统不自带这些库的Debug版,所以Debug版的程序 ...
- Linux学习笔记(4)-文本编辑器vi的使用
vi的三种编辑模式 命令模式(Command mode) 在此模式下可以控制光标的移动,可以删除字符,删除行,还可以对某个段落进行复制和移动 输入模式(Insert mode) 只有在此模式下,可以输 ...
- C#实现IDispose模式
.net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源.其次,GC也不是实时的,所有GC存在不确定性.为了解决这个问题.NET提供了析构函数 public class Dis ...