TD fade effect

[arunpatal]

Hi,

 

Is it possible to give fade effect to td tag???

with the help of javascript or jquery or css...

[cpd]

You could fade the contents of the table-data tag and then remove the tag from the DOM.

 

jQuery can do this easily. It would be best if you go away and have a mess around.

[arunpatal]

I have already spend 1hour to look this but no luck....

 

anyways my table look like this..

 

and i want all menu td with fade effect........

if anyone know then let me know....

till then i am searching

 

<table id="header_table">
 <tr>
   <td height="81" id="header_left_td"> </td>
   <td colspan="7" id="header_right_td"> </td>
 </tr>
 <tr>

<td id="top_menu_first_td" onclick="document.location.href='style/demo_php/return_data_javascript.php';" style="cursor:pointer;cursor:hand">❆
   Admin Login ❆</td>


<td id="top_menu_td" onclick="document.location.href='add_cat.php';" style="cursor:pointer;cursor:hand">❆
   Add New Category ❆</td>


 <td id="top_menu_td" onclick="document.location.href='list_cat.php';" style="cursor:pointer;cursor:hand">❆
  Category List ❆</td>



   <td id="top_menu_td" onclick="document.location.href='add_topic.php';" style="cursor:pointer;cursor:hand">❆
   Add New Topic ❆</td>



   <td id="top_menu_td" onclick="document.location.href='select_cat.php';" style="cursor:pointer;cursor:hand">❆
   Topic List ❆</td>



   <td id="top_menu_last_td" onclick="document.location.href='test.php';" style="cursor:pointer;cursor:hand">❆
   Site Settings ❆</td>

 </tr>
</table>

[codefossa]

CPD's suggestion will help you learn better. But once you know what you're doing, I would still use jQuery's functions.

 

I know I need to stop just writing code for people ... Came to this realization after I wrote it. lol

Demo: http://xaotique.no-ip.org/tmp/39/

 

So .. lets look at what this would be like in jQuery quick.

$(document).ready(function()
{
   $("#myTable td").click(function()
   {
       $(this).fadeOut();
   });
});

 

If you wanted to do it the long way though, you could do something like this.

window.addEventListener("load", function()
{
function fadeOut(elm, speed)
{
	speed = speed / 100;
	elm.style.opacity = 1;

	var timer = setInterval(function()
	{
		if (Number(elm.style.opacity) - speed < 0)
		{
			elm.parentNode.removeChild(elm);
			clearInerval(timer);
		}
		else
		{
			elm.style.opacity -= speed;
		}
	}, 50);
}

var items = window.document.querySelectorAll("#myTable td");

for (var i in items)
{
	items[i].addEventListener("click", function()
	{
		fadeOut(this, 5);
	}, false);
}
}, false);

Edited January 4, 2013 by Xaotique

[cpd]

You shouldn't need window.document.querySelectorAll(). The document object inherits this method so document.querySelectorAll() should be just fine.

[codefossa]

You shouldn't need window.document.querySelectorAll(). The document object inherits this method so document.querySelectorAll() should be just fine.

I've always used window.document. Habit from GM scripts. lol I don't think it makes a difference, but I could be wrong.

[cpd]

It doesn't really because document is a part of window but I just didn't see the need for it; and I was just curious as to why, clearly

Edited January 4, 2013 by CPD

[arunpatal]

thanks a lot for helping.........

now i am testing and will write back when it works hopefully

[arunpatal]

It works with the help of jquery

Thanks CPD and Xaotique

Edited January 4, 2013 by arunpatal

[codefossa]

It works with the help of jquery

Thanks CPD and Xaotique

If I were you, I'd use the second method I showed. Simply because, there's no real reason to include jQuery just for a single action. Everything else you have is longhand, so you may as well just add one extra function.

 

Just my thought. Glad ya got it.