jQuery Effects

1.Show/Hide

เป็นการซ่อนและแสดงผล element ตัวอย่างเช่น 

ตัวอย่างที่ 1 การซ่อนและการแสดงผลพื้นฐาน

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#hide").click(function(){
    $("p").hide();
 });

 $("#show").click(function(){
   $("p").show();
 });
});
</script>
</head>
<body>


<button id="hide">Hide</button>
<button id="show">Show</button>

<p>ส่วนเนื้อหาที่ต้องการซ่อนและแสดงผล เมื่อเกิดเหตํูการณ์คลิก ปุ่ม 2 ปุ่ม</p>

</body>
</html>

ไฟล์ที่ 1 show_hide.php

 

ตัวอย่างที่ 2 การซ่อนและการแสดงผลโดยกำหนดระยะเวลา หรือความช้าเร็วนั่นเอง

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#hide").click(function(){
    $("p").hide(2000);
 });

 $("#show").click(function(){
   $("p").show(2000);
 });
});
</script>
</head>
<body>


<button id="hide">Hide</button>
<button id="show">Show</button>

<p>ส่วนเนื้อหาที่ต้องการซ่อนและแสดงผล เมื่อเกิดเหตํูการณ์คลิก ปุ่ม 2 ปุ่ม</p>

</body>
</html>

ไฟล์ทีี่ 2 การซ่อนและการแสดงผลโดยกำหนดระยะเวลา 

จากไฟล์ที่ 2 สามารถอธิบายได้ว่า เมื่อทำการคลิกที่ปุ่ม show/hide ให้ทำการซ่อนหรือแสดงภายใน 2 วินาที

 

3.ซ่อน/แสดงแบบสลับ (toggle)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
    $("p").toggle(1000);
 });

});
</script>
</head>
<body>


<button>Toggle</button>

<p>ส่วนเนื้อหาที่ต้องการซ่อนและแสดงผล เมื่อเกิดเหตํูการณ์คลิก</p>

</body>
</html>

ไฟล์ที่ 3 ซ่อน/แสดงผลแบบสลับ (Toggle)

จากไฟล์ที่ 3 สามารถอธิบายได้ว่า เมื่อคลิกที่ button ให้ทำการสลับการซ่อนและแสดงผลของ element <p> ความช้าเร็ว 1 วินาที

 

2.Fade

Fade คือารเลือนหาย หรือปรากฎขึ้นซึ่งสามารถกำหนดได้ดังไวยากรณ์ต่อไปนี้

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

1.fadeIn()

fadeIn() คือการแสดงผลแบบค่อยๆปรากฎขึ้น

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;border-radius:50%;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;border-radius:50%;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;border-radius:50%;display:none;background-color:yellow;"></div>

</body>
</html>

 

ไฟล์ที่ 4 fadeIn()

2.fadeOut()

fadeOut คือการเลือนหาย หรือจางหาย

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;border-radius:50%;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;border-radius:50%;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;border-radius:50%;background-color:yellow;"></div>

</body>
</html>

ไฟล์ที่ 5 fadeOut()

 

3.fadeToggle()

fadeToggle คือการสลับระหว่างจางหาย และปรากฎขึ้น

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;border-radius:50%;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;border-radius:50%;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;border-radius:50%;background-color:yellow;"></div>

</body>
</html>

ไฟล์ที่ 6 fadeToggle()

4.fadeTo()

fadeTo คือการกำหนดความจางเข้มของการจางหายและปรากฎขึ้น

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeTo() with different parameters.</p>

<button>Click to fade boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;border-radius:50%;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;border-radius:50%;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;border-radius:50%;background-color:blue;"></div>

</body>
</html>

ไฟล์ที่ 7 fadeTo()

 

3.Slide

สไลด์ประกอบไปด้วย

  • slideDown()
  • slideUp()
  • slideToggle()

 

1.slideDown()

คือการแสดงผล element แบบเลื่อนสไลด์จากด้านบนลงด้านล่าง

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 10px;
  text-align: center;
  background-color: blue;
  border: solid 1px #c3c3c3;
  color:#FFFFFF;
  border-radius:12px;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

ไฟล์ที่ 8 slowDown()

 

2.slowUp()

คือการซ่อนการแสดงผลของ element แบบเลื่อนสไลด์ขึ้น

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 10px;
  text-align: center;
  background-color: blue;
  border: solid 1px #c3c3c3;
  color:#FFFFFF;
  border-radius:12px;
}

#panel {
  padding: 50px;
  display: block;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

ไฟล์ที่ 9 slideUp()

 

3.slideToggle()

คือการสไลด์ขึ้นและลงสลับกันของ element

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 10px;
  text-align: center;
  background-color: blue;
  border: solid 1px #c3c3c3;
  color:#FFFFFF;
  border-radius:12px;
}

#panel {
  padding: 50px;
  display: block;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

ไฟล์ที่ 10 slideToggle()

 

4.Animate

Animate เป็นการสร้างภาพเคลื่อนไหวแบบกำหนดเองได้

 

ตัวอย่างที่ 1 animate พื้นฐาน

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5',
      height: '150px',
      width: '150px'
    });
    $("div").css("border-radius","50%")
  });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:red;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

ไฟล์ที่ 11 animate พื้นฐาน

 

ตัวอย่างที่ 2 Animate กับการใช้ค่าสัมพัทธ์

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '+=20px',
      height: '+=50px',
      width: '+=50px'
    });
  });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:brown;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

ไฟล์ที่ 12 Animate กับการใช้ค่าสัมพัทธ์

จากไฟล์ที่ 12 สามารถอธิบายได้ว่า มีการใช้ค่าสัมพัทธ์เพื่อขยับตำแหน่งจากฝั่งซ้ายไปขวาทีละ 20 พิเซล และเพิ่มความสูงกับความกว้างทีละ 50 พิกเซล ต่อการคลิก 1 ครั้ง

 

ตัวอย่างที่ 3 การใช้ฟังก์ชันคิว หรือลำดับก่อนหลังของการทำงาน

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
  });
});
</script> 
</head>
<body>

<button>Start Animation</button>

<div style="background:orange;height:100px;width:100px;position:absolute;"></div>

</body>
</html>

ไฟล์ที่ 13 animate ตามลำดับคำสั่งก่อนหลัง (คิว)

 

5.Chaining 

เป็นการทำงานเชื่อมโยงกัน จาก 1 ไป 2,3,4,5 …

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color", "red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

</body>
</html>

ไฟล์ที่ 14 chaining

จากไฟล์ที่ 14 สามารถอธิบายได้ว่าการทำงานเชื่อมโยงจาก 1 ไป 2 เมื่อ 1 ดำเนินการเรียบร้อย จากนั้น 2 จะเริ่มดำเนินการต่อ