jQuery怎麼實現簡單的動畫效果？ （實例詳解）

本篇文章我們來看看怎麼利用jquery來實現一些簡單的動畫效果，透過jquery可以實現簡單的顯示隱藏、收縮展開、淡入淡出還有簡單的自訂動畫，希望對大家有幫助！

jQuery 實作簡單的動畫

1、顯示/隱藏

(1)顯示：

show(speed,[callback])

speed:效果長度。可取的值：slow、fast、毫秒數

callback:過渡完成後，所執行的方法名稱 

(2)隱藏：

hide(speed,[callback])

(3)交替：

toggle(speed,[callback]),

若'顯示'則'隱藏';

若'隱藏'則顯示

範例如下：

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="/static/imghw/default1.png"  data-src="../素材/im2.jpg"  class="lazy"   alt=""    style="max-width:90%"  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、向上收縮/向下展開

#(1)收縮：

slidUp(speed,[callback])

(2)展開：

slidDown(speed,[callback])

(3)交替：

slidToggle(speed,[callback])

範例如下：

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

輸出結果：

 3、淡入/淡出

      (1)淡入：

fadeIn(speed,[callback])

#      (1) 淡入：

fadeOut(speed,[callback])

      (2) 淡出：

fadeToggle(speed,[callback])

        (2) 選擇：

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

      ( 3)淡入淡出交替：

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

範例如下：

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

4、自訂動畫

#rrreee

必要的params 參數定義形成動畫的CSS 屬性。

可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

範例如下：

rrreee輸出結果：

#############相關影片教學推薦：###jQuery影片教學## ####

以上是jQuery怎麼實現簡單的動畫效果？ （實例詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！