ajax fade show data

อยากถาววิธีทำให้ข้อมูลที่ดึงจาก AJAX มาแล้ว โชว์แบบ fadein fadeout  ครับ 

ขอบคุณครับ

ความรู้พื้นฐาน jQuery อ่านได้ ที่

https://www.ninenik.com/article_cat-arti_cat-10.html ดูข้อมูลในหน้าท้ายๆ

เป็นการแนะนำเบี้องต้น หรือ จากเว็บไซต์ www.jquery.com โดยตรง

หาก มีความรู้เกี่ยวกับ jQuery พื้นฐาน ดูตัวอย่างโค้ด
 

<style type="text/css">
#showData{
	display:none;	
}
</style>
<button id="testLoad">Test Load Basic Ajax</button>
<button id="testHide">Test Hide Basic Ajax</button>
<div id="showData"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#testLoad").click(function(){ // เมื่อคลิกที่ปุ่ม id  testLoad 
		$("#showData").load("page_navi.php",function(){// ajax โหลดไฟล์ page_navi.php มาแสดงใน div id = showData
			$("#showData").fadeIn(); // แสดง div id = showData แบบ fadeIn หลังจากดึงข้อมูลแล้ว
		});
	});
	$("#testHide").click(function(){ // เมื่อคลิกที่ปุ่ม id  testHide 
			$("#showData").fadeOut(); // ซ่อน  div id = showData แบบ fadeOut
	});
});
</script>

ตัวอย่างการทำงาน

Test Load Basic Ajax Test Hide Basic Ajax

ขอบคุณครับ

แต่มันก็ยังมีป้ญหาครับ

ผมต้องการให้ ทุก 5 วิ มีการดึงข้อมูลจาก gdata.php ซึ่งเป็น การสุ่งข้อมูลมาแสดงทีละข้อมูล แต่พอลองทำแล้ว มันมีปัญหาตรงที่ มันเปลี่ยนข้อมูลได้ตาที่คิดไว้ครับ แต่มันเปลี่ยนแบบแข็งๆ ไม่ fadein fadeout ให้ครับ ใน function ผมให้ fadein อย่างเดียวมันยังไม่ทำงานเลยครับ 

$(function(){  

    setInterval(function(){ // เขียนฟังก์ชัน javascript ให้ทำงานทุก ๆ 30 วินาที  

        // 1 วินาที่ เท่า 1000  

        // คำสั่งที่ต้องการให้ทำงาน ทุก ๆ 3 วินาที  

		

        var getData=$.ajax({ // ใช้ ajax ด้วย jQuery ดึงข้อมูลจากฐานข้อมูล  

                url:"gdata.php",  

                data:null,  

                async:false,  

                success:function(getData){  

                    var textData=$("div#showData2").html(getData); // ส่วนที่ 3 นำข้อมูลมาแสดง  

					$(textData).show(1000);

					 //$("div#showData showData2").fadeIn("slow");

                }  

        }).responseText;  

    },5000);      

}); 

 ตัวอย่างโค้ด

<div id="showData"></div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	setInterval(function(){
		 var dataGet=$.ajax({
			 	url:'sample_data_show.php',
				async:false,
				success:function(dataGet){
					$("#showData").fadeOut(2000,function(){
						$("#showData").html(dataGet).fadeIn();
					});
					
				}
		 });		 
	},5000);
});
</script>

ตัวอย่าง