当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JQuery基础总结四:动画篇

JQuery基础总结四:动画篇

2019年01月20日  | 移动技术网IT编程  | 我要评论

基础-动画篇

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对象,

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网