JQuery总结四:动画篇

基础-动画篇


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('<div>Animation complete.</div>'); }
        }
);
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对象,

猜你喜欢

转载自blog.csdn.net/zhonghuachun/article/details/79887596
今日推荐