Slide up slide down doesn't slide smoothly
Hi there I have just written my first script using JQuery but the animation when sliding up does not seem to work smoothly. (I have tested in IE 6 and Safari so far). Please help.
Script sample:
-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Animate me: Using Effects</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style>
// CSS goes here
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div#paragraph1').hide();
$('a#paragraphShow').click(function()
{
$('div#paragraph1').slideDown({ height: 'hide', opacity: 'hide' }, 'slow');
});
});
$(document).ready(function()
{
$('a#paragraphHide').click(function()
{
$('div#paragraph1').slideUp({ height: 'show', opacity: 'show' }, 'slow');
});
});
</script>
</head>
<body>
<p><a href="#" id="paragraphShow">Show</a> <a href="#" id="paragraphHide">Hide</a></p>
<div id="paragraph1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut malesuada. Proin mi. Quisque iaculis laoreet augue. Donec magna ante, convallis quis, suscipit id, consequat vitae, eros. Integer diam metus, accumsan et, viverra eget, fermentum eu, enim. Etiam luctus orci et neque. Fusce interdum, libero sed fringilla aliquet, diam elit volutpat sem, non mollis velit massa eget magna. Ut tellus diam, tristique porttitor, porta eget, mollis eget, ligula. Donec dolor leo, auctor ac, mollis et, vestibulum nec, diam. Morbi adipiscing. Maecenas id metus. Curabitur consequat ipsum luctus ligula. </p></div>
<p>Morbi ac erat. Cras nibh. Aliquam tellus. Nulla facilisi. Fusce lectus. Cras cursus feugiat nunc. Vestibulum in velit. Praesent pellentesque erat ac est. Suspendisse blandit. Vivamus fermentum rutrum nisl. Pellentesque placerat, ipsum a venenatis blandit, erat massa condimentum massa, nec facilisis pede diam sed ante. Nunc interdum velit pharetra erat. Maecenas lorem mi, pulvinar quis, tincidunt eu, iaculis sed, lorem.</p>
</body>
</html>