Toggle fade ปุ่มซ่อน/แสดงเนื้อหา แบบค่อยๆ จาง : Javascript
 

Blog :: Javascript :: Toggle fade ปุ่มซ่อน/แสดงเนื้อหา แบบค่อยๆ จาง

Fade คือรูปแบบการแสดง และ ซ่อน element ที่ต้องการในรูปแบบค่อยๆจาง/ค่อยๆชัด ลองจินตนาการว่า ถ้าสมมุติผมต้องการซ่อนและแสดงเนื้อหาในเว็บ ส่วนใดส่วนหนึ่ง ผมอาจทำปุ่มขึ้นมา 2 ปุ่ม ปุ่มแรกเอาไว้แสดงเนื้อหานั้น ส่วนอีกปุ่มเอาไว้ซ่อน แต่คิดไปคิดมาผมว่า 2 ปุ่มมันเปลืองเนื้อที่ อยากให้มันเหลือแค่ปุ่มเดียวที่สามารถคลิกสลับซ่อนแสดงพร้อมกัน คอนเซ็ปเหมือนสวิตซ์ไฟในบ้านเราที่เมื่อกดขึ้นบนไฟเปิด ตรงกันข้ามกดลงข้างล่างไฟก็ปิด 
 
คอนเซ็ปของ Toggle fade ก็ไม่มีอะไรมากสลับค่าการแสดงผลกันไปมา เช่นเมื่อ 0 ให้ทำอย่างหนึ่ง เมื่อค่าเป็น 1 ก็ทำอีกแบบหนึ่ง โดยจะเขียน Javascript ร่วมกับ property style ที่ใชกำหนดการแสดงผลของ element ในหน้าเว็บ
 
ลองมาดูในส่วนของ Javascript กันก่อน
########Javascript######## 
<script>
//โค้ดนี้แนะนำให้วางในส่วนของ Body นะครับเพราะผมยังเขียนโค้ดไม่รัดกุมและยืดหยุ่นเท่าไหร่
var _opacity,status;
var show = 1; //กำหนดว่าให้แสดง หรือ ซ่อน element ก่อน
if(show == 0){ //ตรวจสอบและกำหนดค่าเริ่มต้น
document.getElementById("box").style.opacity = 0;
_opacity=0; 
status = 1;
}else{
_opacity=1;
status = 0;
}
var timeFade = 25;//เวลาที่ใช้แสดงผล 1000 millisecond = 1 second
var timeloop;
function toggleFade(elmId){
var elm = document.getElementById(elmId);
//console.log(status+','+_opacity);
if(status == 0){ //ถ้ากำหนดให้ค่าเริ่มต้นเป็น 0 = ซ่อน element ไว้
elm.style.opacity = _opacity; //กำหนดค่าความโปร่งใส่ในแต่ละครั้ง
_opacity -= 0.1; //ลดลงทีละ 0.1
timeloop = setTimeout('toggleFade(\''+elmId+'\')',timeFade); //เรียกฟังก์ชัน toggleFade ให้ทำงานทีละ timeFade (ตามเวลาที่กำหนด)
if(_opacity < -0){ //ถ้าลดลงจนน้อยกว่า -0
clearTimeout(timeloop);//ให้หยุดการเรียกใช้ toggleFade
elm.style.display = 'none'; //ซ่อน element นั้นไป ในทีนี้ใช้ style.display หรือใครจะเปลี่ยนเป็น style.visibility = 'hidden' ก็ได้
elm.style.opacity = 0;//กำหนดค่าความโปร่งใสของelement เป็น 0
status = 1;//กำหนดสถานะการแสดงไว้ให้เป็น 1 เมื่อมีการเรียกใช้ครั้งถัดไป
_opacity = 0;//กำหนดสถานะความโปร่งใสไว้ให้เป็น 0 เมื่อมีการเรียกใช้ครั้งถัดไป
//console.log(status+','+_opacity+','+elm.style.display);
return false;//ให้หยุดการทำงาน
}
}
if(status==1){ //ถ้ากำหนดให้ค่าเริ่มต้นเป็น 1 = แสดง element ไว้
if(elm.style.display == 'none'){//ถ้า element ซ่อนอยู่ก็ให้แสดง
elm.style.display = 'block';
}
elm.style.opacity = _opacity;//กำหนดค่าความโปร่งใส่ในแต่ละครั้ง
_opacity += 0.1;//เพิ่มขึ้นทีละ 0.1
timeloop = setTimeout('toggleFade(\''+elmId+'\')',timeFade);//เรียกฟังก์ชัน toggleFade ให้ทำงานทีละ timeFade (ตามเวลาที่กำหนด)
if(_opacity >= 1){//ถ้าเพิ่มขึ้นจนเท่ากับหรือมากกว่า 1
elm.style.opacity = 1;//กำหนดความโปร่งใสของ element เป็น 1
_opacity = 1;//กำหนดสถานะความโปร่งใสไว้ให้เป็น 1 เมื่อมีการเรียกใช้ครั้งถัดไป
status = 0;//กำหนดสถานะการแสดงไว้ให้เป็น 0 เมื่อมีการเรียกใช้ครั้งถัดไป
clearTimeout(timeloop);//ให้หยุดการเรียกใช้ toggleFade
//console.log(status+','+_opacity+','+elm.style.display);
return false;//ให้หยุดการทำงาน
}
}
 
}
</script>
########End:Javascript######## 
 
######## CSS ######## 
#box{
width:300px;
height:80px;
background-color:#F60;
}
########End:CSS######## 
 
######## HTML ######## 
<button id="btn" onclick="toggleFade('box');">Fade</button>
<div id="box"></div>
########End:HTML######## 

ผมลองเขียนไว้บน JSBin ตามลิงก์นี้เลย http://jsbin.com/ikotos/1/edit

ปล.1 ผมลอง test แค่ใน chrome เท่านั้น อยากนำเสนอแค่คอนเซ็ปถ้าจะเอาไปใช้งานจริงคงต้องเช็คและเขียนโค้ดให้ยืนหยุ่นกว่านี้
ปล 2 อยากให้ Function.in.th มี แบบ SyntaxHighlight จัง จะได้แยก code กับ comment ได้ชัดเจน :)

2 Comment

  • Nuttapong Suptawepong
    #1 Comment By Nuttapong Suptawepong เมื่อ 10 เมษายน 2013 เวลา 9 นาฬิกา 45 นาที
    จะลองศึกษาดูนะครับ
     
  • Nuttapong Suptawepong
    #2 Comment By Nuttapong Suptawepong เมื่อ 4 พฤษภาคม 2013 เวลา 11 นาฬิกา 8 นาที
    ตอนนี้สามารถใช้งานในส่วนของ SyntaxHighlight ได้แล้วครับ
    ถ้ามีคำแนะนำเพิ่มเติมบอกได้เลยครับ ขอบคุณครับ ^ ^
     

Comment Blog

 
 
 
Share This Topic Login with Facebook