Sunday, September 28, 2008

[jQuery] Slide effect

Hi!
I try make slide effect for 2 tables

one table hide, in this time other table show...
How I try make it:

=================================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<br /><br />
<table cellpadding="0" cellspacing="0" border="1" width="300" height="400">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="1" width="100%"
bgcolor="blue" height="400" id="test2" style="display: none;">
<tr>
<td valign="top">BLUE ... BLUE ... BLUE ... BLUE ...</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" width="100%"
bgcolor="red" height="400" id="test1">
<tr>
<td valign="top">RED ... RED ... RED ... RED ...</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function test()
{
$('#test2').SlideInUp(500);
$('#test1').SlideOutUp(500);
}
</script>
<br /><br />
<input type="button" onclick="test();" value="SLIDE">
</body>
</html>
=================================================================================

click on "SLIDE" button, and you see how its works...but bottom table
is jump =( how its fix? maybe I must use other functions?

Thanks! sorry for my english =\
p.s.I use latest jquery and interface

--
С уважением,
Шаповал Евгений

No comments: