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

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!

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>

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:

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

Output result:

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:

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

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(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })

Output results:

## 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!