JQuery slideDown table append problem

[kingnutter]

Hi everyone,

 

In the return function ® below, I cannot get the appended <tr> to slide down nicely. As it stands the <tr> just appears, which is fine but not the graceful effect I wanted.  If I reinstate the hide() command it flickers crazily before appending.

 

<script type="text/javascript" charset="utf-8">


	$('#submit').click(function() {

		var moj_id = $('#moj_id').val();
		var track_no = $('#track_no').val();
		var track_title = $('#track_title').val();
		var track_artist = $('#track_artist').val();
		var track_asinuk = $('#track_asinuk').val();
		var track_asinus = $('#track_asinus').val();

		$.post('../includes/add_track_to_db.php', {
		    'moj_id' : moj_id,
		    'track_no' : track_no,
		    'track_title' : track_title,
			'track_artist' : track_artist,
			'track_asinuk' : track_asinuk,
			'track_asinus' : track_asinus
			},


			function(r) {

				$('<div class="overlay"></div>')
				    .appendTo('#form_block')
					.fadeIn(1000, function() {  

						$('<tr><td>' + r + '</td></tr>')
							//.hide()
							.appendTo('table#tracks') 

							.slideDown(1000, function(){

							    $('#form_block').slideUp(1000, function() {

									$('.overlay').hide()

								});

							});

				// clears form
				document.getElementById('form').reset(); 

				//

				});

			}

		);

		return false; // disable submit click

	});

</script>

 

Themeforest.net have a fix for a similar piece of code:

 

.children(':last')
.height($('#comments li:last').height())

 

But I'm not sure how to incorporate it in my script to found out if it is pertinent to my problem.

 

Any ideas how I can make my new <tr> slideDown nicely?

 

Cheers

KN

[kingnutter]

I found out today that JQuery does not support animation in tables.

 

Ho hum.