Detailed explanation of jQuery animation and special effects

In

jquery, besides asynchronous, what we need to use most is animation and special effects. If we want to give users a better experience, jquery is the best choice, let us Let’s take a look at the detailed explanation of jquery’s animation and special effects!

1. Show and hide hide() and show()

For animation, showing and hiding are the most basic One of the effects, this section briefly introduces the display and hiding of jQuery.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="Hide">
        <input type="button" value="Show">
        <p>点击按钮，看看效果</p>
        <div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
        </div>

The above is a test of the hide() and show() functions.

2. Use the show(), hide() and toggle() methods

The previous example uses show() and toggle() The hide() method has been briefly introduced. In fact, these two methods can accept parameters to control the display and hide process.
The syntax is as follows

show(duration,[callback]);
hide(duration,[callback]);

Among them, duration represents the length of animation execution time, which can be a string representing speed, including slow, normal, fast. It can also be an integer representing time (milliseconds). callback is an optional callback function. Executed after the animation completes.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

The example is the same as the first example, except that time parameters are added to hide() and show(). In fact, toogle() can also add event parameters.

3. Use fadeIn() and fadeOut() methods

For animation effects to show and disappear, jQuery also provides fadeIn( ) fadeOut are two practical methods. Their animation effects are similar to fading, and their syntax is exactly the same as slow() and hide().

 fadeIn(duration, [callback]);
 fadeOut(duration, [callback]);

Example

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(3000); //逐渐fadeOut
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000); //逐渐fadeIn
                });
            });
        </script>
        <img  src="/static/imghwm/default1.png"  data-src="/uploads/allimg/150204/225Q14038-0.jpg"  class="lazy"   alt="Detailed explanation of jQuery animation and special effects" >
        <input type="button" value="Hide">
        <input type="button" value="Show">

Usage of fadeTo() method.

fadeTo() method gradually changes the opacity of the selected elements to the specified value.

Example:

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(1000);
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000);
                });
                $("input:eq(2)").click(function() {
                    $("img").fadeTo(1000, 0.5);
                });
                $("input:eq(3)").click(function() {
                    $("img").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img  src="/static/imghwm/default1.png"  data-src="03.jpg"  class="lazy"   alt="Detailed explanation of jQuery animation and special effects" ></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">

fadeOut related parameters

speed
Optional. Specifies the speed at which an element changes from the current transparency to the specified transparency.

Possible values:

Milliseconds (e.g. 1500)
"slow"
"normal"
"fast"
opacity Required. Specifies the transparency to fade in or out. Must be a number between 0.00 and 1.00.
callback
Optional. The function to be executed after the fadeTo function is executed.

To learn more about callbacks, visit our jQuery Callback chapter.

This parameter cannot be set unless the speed parameter is set.

4. Slide slideUp and slideDown effects

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        </script>  
    <input type="button" value="SlideUp">
    <input type="button" value="SlideDown">
    <input type="button" value="Hide">
    <input type="button" value="Show"><br>
    <div></div><img  src="/static/imghwm/default1.png"  data-src="04.jpg"  class="lazy"   alt="Detailed explanation of jQuery animation and special effects" >

Several mentioned above For animation effects, jQuery also provides slideUp() and slideDown() to simulate a slide-like curtain effect in PPT, which is exactly the same as slow() and hide().

The above code defines a div and an img, which are combined together using the add method.

5. Custom animation

Considering the versatility of the framework and the size of the code file, jQuery cannot cover all animation effects, but It provides the animate() method, which enables developers to customize animations. This section mainly introduces the two forms and applications of the animate() method.

The animate() method gives developers a lot of space. It comes in two forms. The first form is more commonly used. The usage is as follows

animate(params,[duration],[easing],[callback])
where params is the list of css properties that you want to change, and the final value you want to change to, and duration is optional , which has exactly the same meaning as the parameters of show()/hide(). Easing is an optional parameter, usually used by animation plug-ins. Used to control the rhythm change process. jQuery only provides two values: linear and swing. callback is an optional callback function. Fires after the animation completes.

requires attention. Variables in params follow the camel naming method. For example, paddingLeft cannot be written as padding-left. In addition, params can only be attributes represented by numerical values ​​in CSS. For example, properties such as width.top.opacity and

like backgroundColor are not supported by animate.

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button").click(function() {
                    $("#block").animate({
                        opacity: "0.5",
                        width: "80%",
                        height: "100px",
                        borderWidth: "5px",
                        fontSize: "30px",
                        marginTop: "40px",
                        marginLeft: "20px"
                    }, 2000);
                });
            });
        </script>
        <button id="go">Go>></button>
        <div id="block">动画！</div>

In params, jQuery can also use "+=" or "-=" to indicate relative changes. For example,

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">动画！</div>

first perform absolute positioning of the div, and then use -= and += in animate() to achieve relative left movement and relative right movement respectively.

The animate() method has another form, as shown below:

animate(params,options)
Among them, params is exactly the same as the first form, and options is animation. Optional parameter list, mainly including duration, esaing, callback, queue, etc., among which duration.easing.callback is exactly the same as the first form, queue is a Boolean value, indicating that when there are multiple animate() forming jQuery, the current animate( ) Immediately following the next animate(), should it be executed in sequence (true) or false at the same time?

The following example shows the second usage of animate().

    <style>
            div {
                background-color: #FFFF22;
                width: 100px;
                text-align: center;
                border: 2px solid #000000;
                margin: 3px;
                font-size: 13px;
                font-family: Arial, Helvetica, sans-serif;
            }
            input {
                border: 1px solid #000033;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    //第一个animate与第二个animate同时执行，然后再执行第三个
                    $("#block1").animate({
                            width: "90%"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(1)").click(function() {
                    //依次执行三个animate
                    $("#block2").animate({
                            width: "90%"
                        }, 1500)
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(2)").click(function() {
                    $("input:eq(0)").click();
                    $("input:eq(1)").click();
                });
                $("input:eq(3)").click(function() {
                    //恢复默认设置
                    $("div").css({
                        width: "",
                        fontSize: "",
                        borderWidth: ""
                    });
                });
            });
        </script>
        <input type="button" id="go1" value="Block1动画">
        <input type="button" id="go2" value="Block2动画">
        <input type="button" id="go3" value="同时动画">
        <input type="button" id="go4" value="重置">
        <div id="block1">Block1</div>
        <div id="block2">Block2</div>

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

以上就是本文的全部内容了，希望大家能够喜欢。

相关推荐：

Jquery中each的三种遍历方法

JQuery动画animate的stop方法使用详解

JavaScript强化教程――jQuery动画

The above is the detailed content of Detailed explanation of jQuery animation and special effects. For more information, please follow other related articles on the PHP Chinese website!