How to implement simple animation effects with jQuery? (detailed examples)-JS Tutorial-php.cn

How to implement simple animation effects with jQuery? (detailed examples)

WBOY

Release： 2021-12-21 09:00:56

forward

3359 people have browsed it

In this article, let’s take a look at how to use jquery to achieve some simple animation effects. Through jquery, you can achieve simple display and hide, shrink and expand, fade in and out, and simple custom animations. I hope it will be helpful to everyone!

How to implement simple animation effects with jQuery? (detailed examples)

jQuery implements simple animation

1. Show/Hide

(1) Display:

show(speed,[callback])

Copy after login

speed: Effect duration. Possible values: slow, fast, milliseconds

callback: After the transition is completed, the name of the method executed

(2) Hide:

hide(speed,[callback])

Copy after login

(3) Alternate:

toggle(speed,[callback]),

Copy after login

If 'show', then 'hide';

If 'hide', then show

The example is as follows:

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="../素材/im2.jpg" alt="" width="200"    style="max-width:90%" id="img1"> 
  
<script>
$(&#39;#btn_show&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img1&#39;).show(3000);  // 3秒之内显示
            })
             $(&#39;#btn_hide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).hide(1000);  // 1秒之内隐藏
            })
             $(&#39;#btn_toggle&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).toggle();  // 显示或隐藏
            })
</script>

Copy after login

How to implement simple animation effects with jQuery? (detailed examples)

2. Shrink upward/expand downward

(1) Shrink:

slidUp(speed,[callback])

Copy after login

(2) Expand:

slidDown(speed,[callback])

Copy after login

(3) Alternate:

slidToggle(speed,[callback])

Copy after login

The example is as follows:

 $(&#39;#btn_up&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img2&#39;).slideUp();  //展开
            })
             $(&#39;#btn_down&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideDown(); //收缩
            })
             $(&#39;#btn_slide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideToggle();  //收缩展开交替
            })

Copy after login

Output result:

How to implement simple animation effects with jQuery? (detailed examples)

3. Fade in/fade out

(1) Fade in:

fadeIn(speed,[callback])

Copy after login

(2) Fade out:

fadeOut(speed,[callback])

Copy after login

( 3) Fade in and out alternately:

fadeToggle(speed,[callback])

Copy after login

Examples are as follows:

 $(&#39;#btn_fadeIn&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeIn();   //淡入
            })
            $(&#39;#btn_fadeOut&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeOut();  //淡出
            })
            $(&#39;#btn_fade&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeToggle(2000);  //淡入淡出交替
            })

Copy after login

How to implement simple animation effects with jQuery? (detailed examples)

4. Custom animation

$(selector).animate(params,[speed],[easing],[fn])

Copy after login

The required params parameters define the CSS properties that form the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the animation is completed.

Examples are as follows:

$(function(){
            $(&#39;button&#39;).click(function(){
                $(&#39;.bt&#39;).animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })

Copy after login

Output results:

How to implement simple animation effects with jQuery? (detailed examples)

## Recommended related video tutorials:

jQuery video tutorial

The above is the detailed content of How to implement simple animation effects with jQuery? (detailed examples). For more information, please follow other related articles on the PHP Chinese website!