การใช้ Sliding ใน jQuery

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การใช้ Sliding ใน jQuery

การใช้ Sliding ใน jQuery

by Parichat » 11/01/2018 12:09 pm

การ 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

Top