24.jQuery动画

一。jQuery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

    <script >

        $("#div1").animate({

            width:300,

            height:300

 

        },1000,"swing",function(){

            alert("done!")

        })

    </script>

二。元素尺寸，位置和页面滚动事件

脱离文档流的问题解决办法：新建一个div，顶替上一个div的位置。

1.获取和设置元素的尺寸

        width() height()    //获取元素width和height

        innerWidth()    innerHeight()  //包括padding的width和height

        outerWidth()   outerHeight()  //包括padding和border的width和height

        outerWidth(true)  outerHeight(true)  //包括padding和border以及margin的width和height

2.获取元素相对页面的绝对位置

        offset()

3.获取浏览器可视区宽度高度

        $(window).width()   

        $(window).height()  

4.获取页面文档的宽度高度

        $(document).width()   

        $(document).height()  

5.获取页面滚动距离

        $(document).scrollTop()  //常用

        $(document).scrollLeft()

6.页面滚动事件

        $(window).scroll(function(){

            ....

        })

 

三。jQuery属性操作

1.html（）取出或设置html内容

    <script >

        //去除html内容

        var $htm = $("#div1").html();

 

        //设置html内容

        $("#div1").html("<span>添加文字</span>")

 

    </script>

2.prop（）取出或设置某个属性的值

    <script >

        //取出图片地址

        var $src = $("#img1").prop("src");

 

        //设置图片的地址和alt属性

        $("#img1").prop({src:"test.jpg",alt:"Test.Image"})

 

    </script>

 

四。jQuery循环

对jQuery选择的对象集合分别进行操作，需要用到jQuery循环操作，此时可以用对象上的    each   方法：