การใช้ Sliding ใน jQuery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1387
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การใช้ Sliding ใน jQuery

โพสต์โดย Parichat » 11/01/2018 12:09 pm

การ slide ใน jQueryมีองค์ประกอบขึ้นและลง โดยแบ่งได้ 3 รูปแบบ ดังนี้
    1.jQuery slideDown()
    เป็นการแสดงให้เห็นถึงแถบเลื่อน ของเมธอด slideDown()
    ตัวอย่าง

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
    </script>
     
    <style>
    #panel, #flip {
        padding: 5px;
        text-align: center;
        background-color: #66ffe0;
        border: solid 1px #004d3d;
    }

    #panel {
        padding: 50px;
        display: none;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">คลิกให้ slidedown</div>
    <div id="panel">Hello mindPHP!</div>

    </body>
    </html>

    ผลลัพธ์
    dfg.JPG

    ผลลัพธ์ตอน slidedown
    fgr.JPG
    2.jQuery slideUp()
    ตัวอย่าง

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideUp("slow");
        });
    });
    </script>
     
    <style>
    #panel, #flip {
        padding: 5px;
        text-align: center;
        background-color: #ff99cc;
        border: solid 1px #e60073;
    }

    #panel {
        padding: 50px;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">คลิกเพื่อ slide up</div>
    <div id="panel">Hello MindPHP!</div>

    </body>
    </html>

    ผลลัพธ์ก่อน slide up
    fgr.JPG

    ผลลัพธ์หลังslide up
    dfg.JPG

    3.jQuery slideToggle()
    ตัวอย่าง

    โค้ด: เลือกทั้งหมด

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
    </script>

    <style>
    #panel, #flip {
        padding: 5px;
        text-align: center;
        background-color: #ccff33;
        border: solid 1px #86b300;
    }

    #panel {
        padding: 50px;
        display: none;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">คลิก slide down หรือ up</div>
    <div id="panel">Hello MindPHP!</div>

    </body>
    </html>

    ผลลัพธ์ก่อน slide up
    fgdr.JPG

    ผลลัพธ์หลัง slide up
    dft.JPG

อ้างอิง : https://www.w3schools.com/jquery/jquery_slide.asp
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_up
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน