jQuery可以達到怎樣的特效？ jQuery特效的使用（程式碼範例）

本篇文章帶給大家的內容是介紹jQuery可以達到怎樣的特效？ jQuery特效的使用（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。 【相關影片教學推薦：jQuery教學】

1、 jQuery 效果--隱藏與顯示

#使用hide() 和show() 方法來隱藏和顯示HTML 元素。

範例：

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnHide").click(function(){
                $("#myDiv1").hide();
                //语法格式：$(selector).hide(speed,callback);
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。

                // callback的使用如下，即第2个参数是一个函数，jQuery效果执行完会执行该函数。
                // $("#myDiv1").hide(3000,function(){
                //      alert("myDiv1隐藏了");
                // });
            });
            
            $("#btnShow").click(function(){
                $("#myDiv1").show();
                //语法格式：$(selector).show(speed,callback); 
                //可选参数1：speed 参数规定隐藏/显示的速度，可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是隐藏或显示完成后所执行的函数名称。
            });
        });
    </script>


    <button>隐藏</button>
    <button>显示</button>
    <div></div>

#　　　　

#2、 jQuery 效果- 淡入淡出

　　(1) fadeIn() 方法用於淡入已隱藏的元素。

　　(2) fadeOut() 方法用來淡出可見元素。

　　(3) fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間切換。如果元素已淡出，則新增淡入效果。如果元素已淡入，則新增淡出效果。

　　(4) fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。 範例：

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnfadeIn").click(function(){
                $("#myDiv1").fadeIn();
                //语法格式：$(selector).fadeIn(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });
            
            $("#btnfadeOut").click(function(){
                $("#myDiv1").fadeOut();
                //语法格式：$(selector).fadeOut(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeToggle").click(function(){
                $("#myDiv1").fadeToggle();
                //语法格式：$(selector).fadeToggle(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是该效果完成后所执行的函数名称。
            });

            $("#btnfadeTo").click(function(){
                $("#myDiv1").fadeTo("slow",0.35); 
                //语法格式：$(selector).fadeTo(speed,opacity,callback);
                //第一个参数是必须的：传入的值可以是"slow"、"fast" 、毫秒；
                //第二个参数是必须的：传入值是透明度，取值在0-1之间
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称。
            });
        });
    </script>


    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>
    <div></div>

##3、jQuery 效果-滑動

　　(1) slideDown() 方法用於向下滑動元素。

　　(2) slideUp() 方法用於向上滑動元素。

　　(3) slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素已向下滑動，則向上滑動它們。如果元素已向上滑動，則向下滑動它們。

範例：

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btnslideDown").click(function(){
                $("#myDiv1").slideDown();
                //语法格式：$(selector).slideDown(speed,callback);
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });
            
            $("#btnslideUp").click(function(){
                $("#myDiv1").slideUp();
                //语法格式：$(selector).slideUp(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。

            });

            $("#btnslideToggle").click(function(){
                $("#myDiv1").slideToggle();
                //语法格式：$(selector).slideToggle(speed,callback);;
                //可选参数1：speed 参数规定效果的时长。它可以取值："slow"、"fast" 或毫秒。
                //可选参数2：callback 参数是滑动完成后所执行的函数名称。
            });

        });
    </script>


    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>
    <div></div>

4、jQuery 效果 - 動畫animate() 方法用於建立自訂動畫。 範例：

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:&#39;250px&#39;});
                //语法格式：$(selector).animate({params},speed,callback);
                //第一个参数是必须的：值是定义形成动画的 CSS 属性
                //第二个参数是可选的：传入的值是"slow"、"fast" 、毫秒
                //第三个参数是可选的：callback 参数是该效果完成后所执行的函数名称
                 
                //第一个参数的css属性也可以使用相对值，像下面这样
                //$("#myDiv1").animate({left:&#39;250px&#39;,height:&#39;+=10px&#39;,width:&#39;+=10px&#39;});
            });
            
        });
    </script>


    <button>animate</button>
    <div></div>

5、jQuery -- 停止動畫

　　stop() 方法用於停止動畫或效果，在它們完成之前。

　　stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自訂動畫。

範例：###

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){
            $("#btn_animate").click(function(){
                $("#myDiv1").animate({left:&#39;250px&#39;},5000);
            });

            $("#btn_stop").click(function(){
                $("#myDiv1").stop();
                //语法格式：$(selector).stop(stopAll,goToEnd);
                //可选参数1：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
                //可选参数2：规定是否立即完成当前动画。默认是 false。
            });
            
        });
    </script>


    <button>animate</button>
    <button>Stop</button>
    <div></div>

#####6、 jQuery -- 鍊式編程####################鍊式編程######：######在相同的元素上執行多條jQuery 指令，一則接著另一條。這樣的話，瀏覽器就不必多次尋找相同的元素。 ############如需連結一個動作，您只需簡單地將該動作追加到先前的動作上。 ######範例：###

nbsp;html>


<meta>
<title>My Test JQuery</title>
    <script></script>
    <script>    
        $(function(){  
            $("#btnLink").click(function(){
                $("#myDiv1").css("background-color","yellow").slideUp(2000).slideDown(2000);
            });
        });
    </script>


    <button>链式编程</button>
    <div></div>

###總結：以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多jQuery特效，推薦造訪：###js特效大全###！ ###

以上是jQuery可以達到怎樣的特效？ jQuery特效的使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！