Javascript-форум - Плавное появление объекта.

Всем привет! Есть статейка, сделал по её аналогу html страничку (по задумке, изображение, при наведении мыши должно плавно менять свою прозрачность и наоборот), но как я уже понял - не правильно, скажите, где я допустил ошибку? Уже битый час сижу, не могу разобраться. Заранее благодарю!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<table width="100%" height="100%" bgcolor="#000000" border="1">
  <tr align="center">
    <td style="margin-top:60px;">
    <img src="forlogosearch.png" width="813" height="60" alt="logo" id="op2" style="opacity: 0.5; filter: alpha(opacity=50);"
		onmouseover="obj=this; cm=document.getElementById('p2'); appear(1);" onmouseout="disappear(0.1);" /><br /><br />

    </td>
  </tr>
</table>

<script type="text/javascript">
$('#op2').css({opacity:0.1,filter:'alpha(opacity=10)'});


var t,t2,obj,op2;
var cm;     // для отображения процентов
 
function appear(x)   // x - конечное значение прозрачности
{
    op2 = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
     
   if(op2 < x) {
        clearTimeout(t2);
        op2 += 0.05;
        cm.innerHTML = Math.round(op2*10)/10*100+'%'; // отображение процентов
        obj.style.opacity = op2;
        obj.style.filter='alpha(opacity='+op2*100+')';
        t=setTimeout('appear('+x+')',20);
    }
}
 
function disappear(x) {
    op2 = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
     
    if(op2 > x) {
       clearTimeout(t);
        op2 -= 0.05;
        cm.innerHTML = Math.round(op2*10)/10*100+'%'; // отображение процентов
        obj.style.opacity = op2;
       obj.style.filter='alpha(opacity='+op2*100+')';
        t2=setTimeout('disappear('+x+')',20);
    }
}
</script>
</body>
</html>