欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery基础总结四:动画篇

程序员文章站 2022-05-17 14:53:47
基础-动画篇 1.jquery中隐藏元素的hide方法 $elem.hide()  //直接隐藏 $elem.hide("fast | slow"...

基础-动画篇

1.jquery中隐藏元素的hide方法

$elem.hide()  //直接隐藏

$elem.hide("fast | slow")    //   200/600ms动画隐藏

$elem.hide(3000); 3s动画

$elem.hide( 3000,function() {

                    alert('执行3000ms动画完毕');

                }

            });   //隐藏完执行回掉函数

2.jquery中显示元素的show方法(和hide用法一样)

3.jquery中显示与隐藏切换toggle方法(切换hide()与show()方法)

4.jquery中下拉动画slidedown(改变高度,目标的display: none;才能触发)

5.jquery中上卷动画slideup

6.jquery中上卷下拉切换slidetoggle(切换slidedown()与slideup()方法)

7.jquery中淡出动画fadeout(opacity:1->0)

8.jquery中淡入动画fadein   (opacity:0->1)

9.jquery中淡入淡出切换fadetoggle(切换fadein()与fadeout()方法)

10.jquery中淡入效果fadeto

执行到固定透明度

.fadeto( duration, opacity ,callback)

$("p").fadeto(1000, 0.9, function() {

                alert('完成')

            });

11.jquery中动画animate(上)

同时控制多种样式改变

animate(properties,[duration],[easing],[complete])

animate({

    width: 数值|"+=100px"|"hide"|"show"|"toggole",

    fontsize: xxxxxx

},1000,function(){  // code   });

12.jquery中动画animate(下)

显示或者控制其中某一时刻

animate(properties.options);

options:

    duration,    执行动画的时间

    easing,    过渡缓动函数

    step,      每一步完成后要执行的函数

    progress,  每一次动画调用的时候会执行的回掉,类似进度的概念

    complete   动画完成回掉

常用方式:

$('#elem').animate(

    {

        width: 'toggle',

        height: 'toggle'

    }, {

        duration: 5000,

        specialeasing: {

                    width: 'linear',

                    height: 'easeoutbounce'},

        step: function(now, fx) {           //改变值

                   $aaron.text('高度的改变值:'+':'+now)

                },

        progress: function(now, fx) {       //进度

                   $aaron.text('进度:'+arguments[1])

                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;

                    // alert(data)

         },

        complete: function() {

            $(this).after('<p>animation complete.</p>');}

        }

);

13.jquery中停止动画stop

1. stop() 停止当前动画

2. stop(true) 停止当前执行动画元素的所有动画行为

3. stop(true,true) 停止当前执行动画元素的所有动画行为,并且直接到达动画最后一帧

14.jquery中each方法的应用

<script type="text/javascript">

       var obj = {"name":"lucy","age":12,"job":"student"};

       $.each(obj,function(index,value){

        console.log(index+":"+value);

       });

</script>

15.jquery中查找数组中的索引inarray

$.inarray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4

判断是否存在,则返回值是否大于-1

16.jquery中去空格神器trim方法

jquery.trim()函数用于去除字符串两端的空白字符

$.trim($item);

17.jquery中dom元素的获取get方法

get方法是通过已知的索引在合集中找到对应的元素

get是获取的dom对象,eq是获取的jq对象

18.jquery中dom元素的获取index方法

.index()方法

,从匹配的元素中搜索给定元素的索引值,从0开始计数。

.index()   如果不传递任何参数给 .index() 方法,则返回值就是jquery对象中第一个元素相对于它同辈元素的位置

.index(selector)    如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1   

.index(element)   如果在一组元素上调用 .index() ,并且参数是一个dom元素或jquery对象,