felayman-----jquery的css动画效果(一)-优快云博客

本文详细介绍了 JQuery 中 CSS 效果相关的多种方法，包括设置或返回元素样式、尺寸及位置等静态方法，以及实现元素显示、隐藏、滑动、淡入淡出等动态效果的方法，并提供了具体的代码示例。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>1000){
                            return 100;
                        }else{
                            return value+100;
                        }
                });
            });
            $("#test1").hide();
            /*
                show([speed,[easing],[fn]])
             speed[,fn] speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
             fn:在动画完成时执行的函数，每个元素执行一次
                [speed],[easing],[fn]
             speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
             easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
             fn:在动画完成时执行的函数，每个元素执行一次
             */
            /*
            $("#test2").click(function(){
                //隐藏id为test2的div元素
                $(this).hide();
                //显示id为test2的div元素
                $("#test2").show();
            });
            */
            //循环隐藏和显示
            $("#button1").click(function(){
                $("#test2").toggle();
            });
            //稍微复杂的动画效果,先定时隐藏后字自动显示
            $("#button2").click(function(){
                $("#test2").hide(5000,"linear",function(){
                    $("#test2").show("slow");
                });
            });
            //复杂的切换
            $("#test2").css("background-color","blue");
            $("#button3").click(function(){
                $("#test2").toggle("fast","linear",function(){
                    var color = $("#test2").css("background-color");
                   if(color == "blue")
                       $("#test2").css("background-color","red");
                    else
                       $("#test2").css("background-color","blue");
                });
            });
        });
    </script>
</head>
<body>
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<button id="button4">button4</button>
<div id="test1" style="width:100px;height:100px;background:red;">div</div>
<div id="test2" style="width:100px;height:100px;background:brown;"></div>
<p id="test3" style="width:100px;height:100px;background:blue;"></p>
</body>
</html>