jquery 动画

最新推荐文章于 2024-09-13 17:21:46 发布

angel201494

最新推荐文章于 2024-09-13 17:21:46 发布

阅读量854

点赞数

分类专栏： jquery HTML 文章标签： jquery 动画 html

jquery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

1.隐藏元素的hide方法（改变display属性，改变高度和宽度）

.hide( options )

当提供hide方法一个参数时，.hide()成为一个动画方法。.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作

$("button:last").click(function() {
            $("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('执行3000ms动画完毕')
                }
            })
        });

2.显示元素的show方法（改变display属性，改变高度和宽度）

$('elem').hide(3000).show(3000)

注意事项：

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置(hide(): display:block→none)

如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法才能正常工作，必须使用.css('display', 'block !important')重写样式

如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

3.显示与隐藏切换toggle方法（改变display属性，改变高度和宽度）

切换显示或隐藏匹配元素

.toggle( [duration ] [, complete ] )

提供了时间、还有动画结束的回调。

4.下拉动画slideDown（改变display属性，改变高度）

用滑动动画显示一个匹配元素

.slideDown( [duration ] [, complete ] )

提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束

注意事项：

下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none

如果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次

$("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                alert('动画执行结束')
            })
        });

5.上卷动画slideUp（改变display属性，改变高度）

.slideUp( [duration ] [, easing ] [, complete ] )

$("button:last").click(function() {
            $("#a2").slideUp(3000,'linear',function(){
                alert('动画执行结束')
            })
        });

6.上卷下拉切换slideToggle（改变display属性，改变高度）
用滑动动画显示或隐藏一个匹配元素

.slideToggle( [duration ] [, complete ] )
提供了时间、还有动画结束的回调。

7.淡出动画fadeOut（改变opacity，1-0）

.fadeOut( [duration ] [, complete ] )
通过不透明度的变化来实现所有匹配元素的淡出效果，(透明度0-1之间)并在动画完成后可选地触发一个回调函数。

<body>
    <h2>fadeOut</h2>
    <p>测试文字淡入效果</p>
    <p>慕课网,专注分享</p>
    淡出的隐藏效果：
    <select id="animation">
        <option value="1">fadeOut( )</option>
        <option value="2">fadeOut( "slow" )</option>
        <option value="3">fadeOut( 3000 )</option>
        <option value="4">fadeOut( 1000, complete )</option>
        <option value="5">fadeOut( 1000, "linear" )</option>
        <option value="6">fadeOut( options )</option>
    </select>
    
    </br></br>
    
    <input id="btnFadeOut" type="button" value="点击淡出隐藏" />
    <input id="btnShow" type="button" value="显示" />
    
    <script type="text/javascript">
    //【显示】按钮
    $("#btnShow").click(function() {
        $("p").show();
    });

    //【隐藏】按钮
    $("#btnFadeOut").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeOut();
        } else if (v == "2") {
            $("p").fadeOut("slow");
        } else if (v == "3") {
            $("p").fadeOut(3000);
        } else if (v == "4") {
            $("p").fadeOut(2000, function() {
                alert("隐藏完毕!");
            });
        } else if (v == "5") {
            $("p").fadeOut(1000, "linear");
        } else if (v == "6") {
            $("p").fadeOut({
                duration: 1000
            });
        }
    });
    </script>
</body>

8.淡入动画fadeIn（改变opacity，0-1）

.fadeIn( [duration ] [, complete ] )

9.淡入淡出切换fadeToggle（改变opacity，0或1）

.fadeToggle( [duration ] [, complete ] )

10.淡入效果fadeTo（改变opacity）
渐变为给定的不透明度（值介于 0 与 1 之间）。

.fadeTo( duration, opacity [, complete ] )

$("p").fadeTo(1000, 0.9, function() {
                alert('完成')
            });

操作元素的显示和隐藏：
改变样式diplay为none（toggle）
位置高度为0（slideToggle）
透明度为0（fadeToggle）

11.动画animate

.animate( properties [, duration ] [, easing ] [, complete ] )
properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

duration时间

easing动画运动的算法
jQuery库中是默认的时调用 swing。
complete回调

<body>
    <h2>animate(上)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果：
    <select id="animation">
        <option value="1">动画1</option>
        <option value="2">动画2</option>
        <option value="3">动画3</option>
        <option value="4">动画4</option>
    </select>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            // 数值的单位默认是px
            $aaron.animate({
                width  :300,
                height :300
            });
        } else if (v == "2") {
            // 在现有高度的基础上增加100px
            $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });
        } else if (v == "3") {
            $aaron.animate({
                fontSize: "5em"
            }, 2000, function() {
                alert("动画 fontSize执行完毕!");
            });
        } else if (v == "4") {
            //通过toggle参数切换高度
            $aaron.animate({
                width: "toggle"
            });
        } 
    });
    </script>
</body>

使用队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

.animate( properties, options )

options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

<body>
    <h2>animate(下)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果：
    <select id="animation">
        <option value="1">动画step动画</option>
        <option value="2">动画progress回调</option>
    </select>
    <a></a>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一个动画都会调用
                step: function(now, fx) { 
                   $aaron.text('高度的改变值:'+now) 
                }
            })
        } else if (v == "2") { 
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                   $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });
    </script>
</body>

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

关于Easing的用法：http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html

12.停止动画stop

.stop(stopAll,goToEnd);

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

stop()：只会停止第一个动画，第二个第三个继续执行
stop(true)：停止第一个、第二个和第三个动画
stop(true,ture)：停止动画，直接跳到第一个动画的最终状态

13.each方法的应用

jQuery.each(array, callback )
jQuery.each( object, callback )

jQuery方法可以很方便的遍历一个数据，不需要考虑这个数据是对象还是数组

遍历数组

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});

遍历对象：

$.each({
                name: "张三",
                age: 18
            }, function(property, value) {
                $aaron.append("属性名=" + property + "; 属性值=" + value);
            });

回调函数第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

14.查找数组中的索引inArray

用于在数组中搜索指定的值，并返回其索引值。(第一个)如果数组中不存在该值，则返回 -1。

jQuery.inArray( value, array [, fromIndex ] )

传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

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

15.去空格神器trim方法

去除字符串两端的空白字符

移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
如果这些空白字符在字符串中间时，它们将被保留，不会被移除

16.DOM元素的获取get方法

<a>1</a>
<a>2</a>
<a>3</a>

第二个a元素的查找： $(a).get(1)

注意
get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引

负索引值参数
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1
同样是找到第二元素，可以传递 $(a).get(-2)

17.DOM元素的获取index方法

已知元素在合集中找到对应的索引

.index()
.index( selector )
.index( element )
如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

<body>
    <h2>index方法</h2>
    <ul>
        <a></a>
        <a></a>
        <li id="test1">1</li>
        <li id="test2">2</li>
        <li id="test3">3</li>
    </ul>
    <ul>
        <li id="test4">4</li>
        <li id="test5">5</li>
        <li id="test6">6</li>
    </ul>
    <select id="animation">
        <option value="1">index无参数</option>
        <option value="2">index传递dom</option>
        <option value="3">index传递jQuery对象</option>
    </select>
    <input id="exec" type="button" value="点击执行">
    <br />
    <br /> 索引结果：
    <span></span>
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();

        var $span = $("span");
        $span.empty();

        if (v == "1") {
            //找到第一个li的同辈节点中的索引位置
            $span.text($("li").index())
        } else if (v == "2") {

            //通过传递dom查找
            $span.text($("li").index(document.getElementById("test5")))

        } else if (v == "3") {
            //通过传递jQuery对象查找
            $span.text($("li").index($("#test6")))

        }
    });
    </script>
</body>

转自慕课