felayman-jquery的css动画效果(1)
日期：2014-05-16 浏览次数：20775 次
felayman-----jquery的css动画效果(一)
<!DOCTYPE html>
<html>
<head>
<title>jqeury的css效果涉及基础</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
JQery的CSS效果主要是由下面几个方法来组合实现
1.css() 设置或返回匹配元素的yansghi
2.height() 设置或返回匹配元素的高度
3.offset() 返回第一个匹配元素相对于文档的未知
4.offsetParent() 返回最近的定位祖先元素
5.postion() 返回第一个匹配元素相对于父元素的未知
6.scrollTop() 设置或返回匹配元素相对于滚动条顶部的偏移
7.scrollLeft() 设置或返回匹配元素相对于滚动条左部的偏移
8.width() 设置或返回匹配元素的宽度
9.show() 显示隐藏的匹配元素。
10.hide() 隐藏显示的元素
11.toggle() 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
12.slideDown() 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来
13.sildeUp() 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来
14.sildeToggle() 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示
15.fadeIn() 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
16.fadeOut() 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
17.fadeTo() 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化
18.fadeToggle() 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
19.animate() 用于创建自定义动画的函数。
20.stop() 停止所有在指定元素上正在运行的动画。
21.delay() 设置一个延时来推迟执行队列中之后的项目
下面对各个方法进行详细说明:
1.css(name|pro|[,val|fn])访问匹配元素的样式属性。
参数解释:
name 要访问的属性名称
properties 要设置为样式属性的名/值对
function 此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值
*/
//1.获取id为test1的颜色值
//alert($("#test1").css("color"));//给出的rgb格式
//2.改变id为test1的背景色
$("#test1").css("background","blue");
//3.改变id为test1的的元素的多个属性,是由JSON格式
$("#test1").css({
"background":"yellow",
"width":200,
"height":200
});
//通过函数来不断改变其字体大小
$("#test1").click(function(){
$(this).css({
//index为index为元素在对象集合中的索引位置
//value是原先的属性值,字体默认为12,可以设置
"font-size":function(index,value){
var font_size = parseInt(value)*2;
if(font_size<256){
return font_size;
}else{
return 12;//这里不能写value,只能写上
}
}
});
});
//height()/width() 设置或返回匹配元素的高度.宽度
//1.返回id为test1的div的高度和宽度/高度
// alert($("#test1").width());
// alert($("#test1").height());
//2.修改id为test1的div的高度和宽度/高度
$("#test1").width(400).height(900);
/*
height([val|fn])
val 设定CSS中 'height' 的值
function(index, height) 返回用于设置高度的一个函数
*/
$("#test1").click(function(){
$(this).width(function(index,value){
//动态的循环改变div的宽度
var width = value;
if(value>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
