การใช้ Sliding ใน jQuery

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

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

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4859
Joined: 08/01/2018 10:03 am

การใช้ Sliding ใน jQuery

Post by Parichat »

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

Code: Select all

<!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
[/list]
  • 2.jQuery slideUp()
    ตัวอย่าง

    Code: Select all

    <!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()
    ตัวอย่าง

    Code: Select all

    <!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. ... slide_down
https://www.w3schools.com/jquery/tryit. ... y_slide_up
https://www.w3schools.com/jquery/tryit. ... ide_toggle
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests