Home  >  Article  >  Web Front-end  >  How to implement simple animation effects with jQuery? (detailed examples)

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

WBOY
WBOYforward
2021-12-17 19:02:013406browse

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])

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])

(3) Alternate:

toggle(speed,[callback]),

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>

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

2. Shrink upward/expand downward

(1) Shrink:

slidUp(speed,[callback])

(2) Expand:

slidDown(speed,[callback])

(3) Alternate:

slidToggle(speed,[callback])

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();  //收缩展开交替
            })

Output result:

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

3. Fade in/fade out

(1) Fade in:

fadeIn(speed,[callback])

(2) Fade out:

fadeOut(speed,[callback])

( 3) Fade in and out alternately:

fadeToggle(speed,[callback])

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);  //淡入淡出交替
            })

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

4. Custom animation

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

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)
            })
        })

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!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete