jQuery 效果--自定义效果

最新推荐文章于 2022-08-13 17:33:37 发布

三知之灵

最新推荐文章于 2022-08-13 17:33:37 发布

阅读量433

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/tjj3027/article/details/79273575

版权

JQuery 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

自定义效果

方法列表

方法	描述
animate()	用于执行一个基于css属性的自定义动画。
delay()	用于延迟队列中下一项的执行。
stop()	用于停止当前匹配元素上正在运行的动画。
finish()	用于立即完成队列中的所有动画。

方法说明

animate()：
你可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画。

语法：

.animate( cssProperties [, duration ] [, easing ] [, complete ] )
.animate( cssProperties, options )

参数说明：

参数	描述
cssProperties	Object类型一个或多个css属性的键值对所构成的Object对象。
duration	可选/String/Number类型指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。
easing	可选/String类型指定使用何种动画效果，默认为”swing”，还可以设为”linear”或其他自定义的动画样式的函数名称。
complete	可选/Function类型元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。
options	Object类型指定的选项参数对象。

参数options对象可以识别如下的属性(以下属性均是可选的)：

属性	属性描述
duration	参见参数duration。
easing	参见参数easing。
complete	参见参数complete。
queue	Boolean类型指示是否将动画放入效果队列中，默认为true。从1.7版本开始，该参数可以为字符串，用于放入指定名称的效果队列。如果你指定的队列不会自动开始，你需要手动调用dequeue(“queueName”)来启动队列。

此外，jQuery 1.4 和 1.8 还为参数options新增了许多新的选项支持，但这些参数并不常用

除了以下提到的值外，所有动画css属性都应该可以变化为一个单一的数值。使用基本的jQuery功能，大多数非数值的css属性都无法用来执行动画。

例如：width、height、left、top都可用于动画，但color、background-color无法用于动画(除非使用jQuery.Color()插件)。除非你为属性值指定了单位(例如：px、em、%)，否则默认的数值单位为像素(px)。

速写的css属性可能无法获得完整全面的支持

例如：border、margin等，因此不推荐使用。

还可以将css属性值设为一些特定的字符串，则jQuery会调用该属性默认的动画形式。

例如：”show”、”hide”、”toggle”

此外，css属性值也可以是相对的，你可以为属性值加上前缀”+=”或”-=”，以便于在原来的属性值上增加或减少指定的数值。

例如：{ “height”: “+=100px” }，表示在原有高度的基础上增加100px。

HTML：

<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>
动画效果：
<select id="animation">
    <option value="1">动画1</option>
    <option value="2">动画2</option>
    <option value="3">动画3</option>
    <option value="4">动画4</option>
    <option value="5">动画5</option>
</select>
<input id="exec" type="button" value="执行动画" >

javaScript代码：

$("#exec").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        // 数值的单位默认是px
        $myDiv.animate( { height: 200 } );
    }else if(v == "2"){
        // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
        // 多个动画连续执行
        $myDiv.animate( { height: "+=300px" }, "slow" ); 
        $myDiv.animate( { width: "50%" }, 1000 );       
        $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
    }else if(v == "3"){
        // font-size或fontSize均可，由多个单词构成的属性均是如此
        $myDiv.animate( { fontSize: "30px" }, 2000 );
        $myDiv.animate( { fontSize: "14px" }, 2000, function(){
            alert("动画3执行完毕!");
        });
    }else if(v == "4"){
        $myDiv.animate( { width: "50%", height: "50%" }, { duration: 2000, easing: "linear" });
    }else if(v == "5"){
        // 根据高度切换显示/隐藏，显示时高度从0增加到原高度，隐藏时高度从原高度减小到0
        $myDiv.animate( { height: "toggle" });
    }   
} );

delay()
可以将队列中等待执行的下一个动画延迟指定的时间后才执行。它常用在队列中的两个jQuery效果函数之间，从而在上一个动画效果执行后延迟下一个动画效果的执行时间。

如果下一项不是效果动画，则它不会被加入效果队列中，因此该函数不会对它进行延迟调用。

语法：

.delay( duration [, queueName ] )

参数说明：

参数	描述
duration	String/Number类型指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串”fast”(=200)或”slow”(=600)。
queueName	可选/String类型指定的队列名称，默认为”fx”，表示jQuery标准的效果队列。

HTML代码：

<p>动画效果：
    <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="执行动画" >
</p>

<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>

javaScript代码：

$("#exec").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        $myDiv.slideUp( 1000 )
        .delay( "slow" )
        .fadeIn( 1500 );
    }else if(v == "2"){
        $myDiv.fadeOut( "slow" )
        .delay( 2000 )
        .slideDown( 1000 )
        .animate( { height: "+=300" } );
    }else if(v == "3"){
        /*
        注意：只有动画才会被加入效果队列中
        以下代码实际上只有slideUp()、slideDown()会加入效果队列
        delay()的延迟只对slideDown()起作用
        show()在被调用时就立即执行了(此时slideUp的动画效果尚未执行结束)
        以下代码的执行顺序时：
        1、slideUp()被加入队列、开始执行，
        2、show()也开始执行，它立即执行完毕，此时slideUp()的动画尚未执行结束
        3、延迟2秒
        4、执行SlideDown()
        */
        $myDiv.slideUp( "slow" )
        .delay( 2000 ) 
        .show( ) // 它不是一个效果动画
        .slideDown( );
    }else if(v == "4"){
        $myDiv.show()
        .delay( 2000 )
        // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
        .animate( { height: "+=300px" }, 2000 ) 
        .animate( { width: "50%" }, 1000 )      
        .animate( { width: "200px", height: "100px" }, 1000 );      
    }
} );

stop()：
默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。

停止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留在什么状态。例如：执行一个元素高度从100px到200px的过渡动画，当高度为150px时停止了该动画，则当前高度仍然保持150px的现状。如果该动画设置了执行完毕后的回调函数，则不会执行该回调函数。

语法：

.stop( [ queueName ] [, clearQueue [, jumpToEnd ]] )

参数说明：

参数	描述
queueName	可选/String类型需要停止动画的队列名称，默认为”fx”。
clearQueue	可选/Boolean类型是否清空队列中的所有动画，默认值为false。
jumpToEnd	可选/Boolean类型指示是否直接完成当前动画，默认值为false。

参数queueName。如果没有指定，则默认为”fx”，表示jQuery标准的效果队列。

如果设置参数jumpToEnd 必须设置参数clearQueue

如果参数jumpToEnd为true，则不再缓慢执行当前动画，而是直接完成。此时，元素将会保持动画执行完毕后的状态。

HTML代码：

<p>
停止效果：
<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="执行动画" />
<input id="stop" type="button" value="停止动画" />
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;">CodePlayer</div>

javascript代码：

$("#exec").click( function(){
    var $myDiv = $("#myDiv");
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
    $myDiv.animate( { height: "+=300px" }, 2000 ); 
    $myDiv.animate( { width: "50%" }, 1000 );       
    $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
} );

$("#stop").click( function(){
    var v = $("#animation").val();
    var $myDiv = $("#myDiv");
    if(v == "1"){
        $myDiv.stop( ); // 停止当前动画，不清空队列
    }else if(v == "2"){
        $myDiv.stop( true ); // 停止当前动画，清空队列(停止全部)
    }else if(v == "3"){
        $myDiv.stop( "fx", true ); // 等同于"2"
    }else if(v == "4"){
        $myDiv.stop( true, true ); // 清空队列，直接完成当前动画
    }
} );

finish()：

会停止当前正在运行的动画效果直接完成动画效果，完成匹配元素的所有动画(),并删除所有队列中的动画。

例如：如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，调用finish（）会停止效果，直接变为A、B、C完成时的效果

语法：

.finish( [ queueName ] )

参数说明：

参数	描述
queueName	可选/String类型指定的队列名称，默认为”fx”，表示jQuery标准的效果队列。

HTML代码:

<p>
    <input id="exec" type="button" value="执行动画" >
    <input id="finish" type="button" value="立即完成所有动画" >
</p>
<div id="myDiv" style="width:300px; height: 100px; background-color: #eee;" >CodePlayer</div>

javascript代码:

$("#exec").click( function(){
    var $myDiv = $("#myDiv");
    // 在现有高度的基础上增加300px (如果原来是100px，增加后就是400px)
    $myDiv.animate( { height: "+=300px" }, 2000 ); 
    $myDiv.animate( { width: "50%" }, 1000 );       
    $myDiv.animate( { width: "200px", height: "100px" }, 1000 );        
} );

$("#finish").click( function(){
    // 无论当前动画执行到什么状态，立即完成所有动画
    // div的CSS属性直接回到动画执行完毕的最终状态(width:200px; height:100px)
    $("#myDiv").finish( );
} );