jQuery操作之效果

seal_de 發布于2019-08-21 11:47 / 3297人閱讀

摘要：，用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的事件。用選擇器選中第二個，給它綁定事件，現在是顯示的，它會在一秒鐘之內慢慢的隱藏，實現淡出效果。，通過不透明度的變化來實現所有匹配元素的淡出效果。效果如下，，關閉頁面上所有的動畫。

jQuery操作之效果

效果操作一共分五類：1.基本，2.滑動，3.淡入淡出，4.自定義，5.設置

1. show()，hide()，toggle()

代碼如下：

html代碼：

   jQuery代碼：
        $("p").show();            
            開始P是隱藏的，執行完這行代碼，P顯示

        $("p").hide();            
            現在的P標簽是顯示的，執行完這行代碼P隱藏

        $("#btn1").click(function(){
            $("p").toggle("show");
        })
            給按鈕綁定一個click事件，當P是現實的時候讓它隱藏，如果P是隱藏的，那就讓它顯示

注釋：show(),顯示隱藏的匹配元素。
     hide()，隱藏顯示的元素。
     toggle()，用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

slideDown()，slideUp()，slideToggle()

代碼如下：

html代碼：

jQuery代碼：
    $("#btn1").click(function(){
            $("div").slideDown();
        });
           給id為btn1的按鈕綁定click事件，當點擊展開按鈕的時候，div向下展開。

        $("#btn2").click(function(){
            $("div").slideUp();
        });
           給id為btn2的按鈕綁定click事件，當點擊展開按鈕的時候，div向上收縮。

        $("#btn3").click(function(){
            $("div").slideToggle();
        });
            給id為btn3的按鈕綁定click事件，當div是向下展開的時候就向上收縮，反之。
注釋：slideDown(),向下展開。
     slideUp(),向上收縮。
     slideToggle(),通過高度變化來切換所有匹配元素的可見性。
效果如下：

fadeIn()，fadeOut()，fadeTo()，fadeToggle()

代碼如下：

html代碼：

jQuery代碼：
    $("input").first().click(function(){
            $("div").fadeIn(1000);
        });
            用選擇器選中第一個input，給它綁定click事件，div開始是隱藏的，它會在一秒鐘之內慢慢的顯示出來，
            實現淡入效果。

        $("input").eq(1).click(function(){
            $("div").stop().fadeOut(1000);
            //$("div").fadeOut(1000);
        });
            用選擇器選中第二個input，給它綁定click事件，div現在是顯示的，它會在一秒鐘之內慢慢的隱藏，實現
            淡出效果。

        $("input").eq(2).click(function(){
            $("div").stop().fadeToggle(1000);
        })
            用選擇器選中第三個input，給它綁定click事件，當div是顯示的時候，讓它淡出，反之，當div是隱藏的時候，
            讓它淡入。

        $("input").eq(3).click(function(){
            $("div").stop().fadeTo(1000,0.5);
        })        
            用選擇器選中第四個input，給它綁定click事件，設置淡入（淡出）的時間和透明度。

注釋：fadeIn()，通過不透明度的變化來實現所有匹配元素的淡入效果。
     fadeOut()，通過不透明度的變化來實現所有匹配元素的淡出效果。
     fadeTo()，把所有匹配元素的不透明度以漸進方式調整到指定的不透明度。
     fadeToggle()，通過不透明度的變化來開關所有匹配元素的淡入和淡出效果。
效果如下：

animate()，stop()，delay()

代碼如下：

css代碼：
    div{
        width:100px;
        height:100px;
        background:red;
    }

html代碼：
    ST宋澤

jQuery代碼：
    $("#btn1").click(function(){
            $("div").delay(2000).animate({
                "width":"300px",
                "height":"300px",
                "font-size":"4em"
            },5000,function(){
                console.log("動畫完成")
            })
        });
            給id為btn1的按鈕綁定click事件，當點擊按鈕的時候，延遲兩秒鐘，div的width，height，font-size會
            逐漸變成設置的這些值，兩秒之后打印 “動畫完成”。

        $("#btn2").click(function(){
            $("div").stop();
        })
            給id為btn2的按鈕綁定click事件，當div正在做動畫的時候，點擊按鈕，動畫會停止。
注釋：animate()，用于創建自定義動畫的函數。
     stop()，停止所有在指定元素上正在運行的動畫。
     delay()，設置一個延時來推遲執行隊列中之后的項目。

效果如下：

jQuery.fx.off，jQuery.fx.interval

     jQuery.fx.off，關閉頁面上所有的動畫。
    jQuery.fx.interval，設置動畫的顯示幀速。

看完文章，是時候放松一下下了，嘻嘻！

GPU云服務器云服務器 jQuery打字效果 jquery等待效果 jquery動畫效果 jquery放大效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87114.html

jQuery設計思想之理解篇

摘要：創建新元素的方法非常簡單，只要把新元素直接傳入的構造函數就行了七工具方法設計思想之六除了對選中的元素進行操作以外，還提供一些與元素無關的工具方法。八事件操作設計思想之七，就是把事件直接綁定在網頁元素之上。轉自：阮一峰 2011年7月26日 http://www.ruanyifeng.com/blo... jQuery是目前使用最廣泛的JavaScript函數庫。據統計，全世界排名...

newsning 2019-08-20 16:12 評論0 收藏0
jQuery入門筆記之（七）插件

摘要：目前插件已超過幾千種，由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言，直接使用這些插件將快速穩定架構系統，節約項目成本。也就是說，插件也是代碼，通過文件引入的方式植入即可。現在我們就完成了一個下拉菜單的插件。插件(Plugin)也成為 jQuery 擴展(Extension)，是一種遵循一定規范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界...

defcon 2019-08-19 17:44 評論0 收藏0
jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個參數表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發元素，不然無效。和表示鼠標移入和移出的時候觸發。按下返回按下返回和分別表示光標激活和丟失，事件觸發時機是當前元素。轉自個人博客在JavaScript 有一個非常重要的功能，就是事件驅動。如果你的網頁需要與用戶進行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評論0 收藏0
前端知識普及之頁面加載

摘要：如果你的文件涉及操作，可以直接在里面添加回調函數，或者說基本上我們的文件都可以寫在里面進行調用其實，這和我們將文件放在底部，在上面加以及異步加載文件的效果是一樣一樣的。如果大家想繼續看下面的內容的話，有一個要求，就是回答我一個問題:你這樣寫過代碼嗎？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 評論0 收藏0
PJAX，站點加速之翼

摘要：是一款可愛的小插件，將和瀏覽器的封裝到一起，解決了單純使用進行無刷新加載時對搜索引擎的不友好，并且節省了開支提高了瀏覽速度，明顯地優化了用戶體驗。是提供的，是對瀏覽器歷史對象的增強。 showImg(https://segmentfault.com/img/remote/1460000007640529?w=1008&h=569); pjax 是一款可愛的 jQuery 小插件，將 a...

QiuyueZhong 2019-06-27 14:55 評論0 收藏0