Easy as for jQuery GURUS!

[ablitz]

Hi guys, I spent the whole day (thats 8 hours straight) trying to get a simple jQuery function to work but failed miserably!!! I very very new to the jQ scene and I know I have a lot of catching up to do!
Could somebody get this to work for me ???

All i want is when user clicks is:
1.the box with info fades out
2. when data returned from the database the box fades in with the new data!

What happens now is while the box fading out i can see new set of data already loaded and thats a complete FAIL of what I interned to do. ANY HELP IS GREATLY APPRECIATED! Peace.

$(document).ready(function() {

		$("ul.sc_menu a").click(function() 
		{

			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});
			
				$.post('projects-agent.php', {'title': $(this).text()}, function(data) 
				{
					$('#content #mainbg #infobox #trackinfo').html(data);
					$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});
					
				});
			return false;
		});
	});

[pritaeas]

It is possible to attach a callback function to the animate() function. This callback is called after the animation is done. Put your post in that function. See http://docs.jquery.com/Effects/animate

[ablitz]

hi thank you for your reply, its easier said than done, i can't get the syntax right! could you please kindly rewrite the code? cheers

[ablitz]

This is what I've tried and it didnt work:(

$(document).ready(function() {
		soundManager.debugMode = false;
		$("ul.sc_menu a").click(function() 
		{
			//$('#mainbg').fadeOut("slow");
			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},function(){$.post('projects-agent.php', {'title': $(this).text()},function(data){$('#content #mainbg #infobox #trackinfo').html(data);$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"})});
			
				;
					
					threeSixtyPlayer.init();
				});
			return false;
		});
	});

[ablitz]

This is what I've tried and it didnt work:(

$(document).ready(function() {
		soundManager.debugMode = false;
		$("ul.sc_menu a").click(function() 
		{
			//$('#mainbg').fadeOut("slow");
			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},function(){$.post('projects-agent.php', {'title': $(this).text()},function(data){$('#content #mainbg #infobox #trackinfo').html(data);$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"})});
			
				;
					
					threeSixtyPlayer.init();
				});
			return false;
		});
	});

[codejoust]

$(function(){

		$("ul.sc_menu a").click(function() {
			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
function(){
alert('animated');
$.post('projects-agent.php', {'title': $(this).text()},
function(data){
alert(data);
$('#content #mainbg #infobox #trackinfo').html(data);
$('#content #mainbg #infobox #trackinfo').fadeIn('fast');
});
	});
			return false;
		});
	});

Do the alerts go off with the code? It looked like a few syntax errors...
They should be cleaned up. Are you sure the php file is returning a http 200 and data? Also, I'd try to make sure you audioplayer is present.

[ablitz]

$(function(){

		$("ul.sc_menu a").click(function() {
			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
function(){
alert('animated');
$.post('projects-agent.php', {'title': $(this).text()},
function(data){
alert(data);
$('#content #mainbg #infobox #trackinfo').html(data);
$('#content #mainbg #infobox #trackinfo').fadeIn('fast');
});
	});
			return false;
		});
	});

Do the alerts go off with the code? It looked like a few syntax errors...
They should be cleaned up. Are you sure the php file is returning a http 200 and data? Also, I'd try to make sure you audioplayer is present.

got it! thank you for your time and help!!

[Luckychap]

May this help

$(document).ready(function() {

$("ul.sc_menu a").click(function() 
{

$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});

$.post('projects-agent.php', {'title': $(this).text()}, function(data) 
{
//$('#content #mainbg #infobox #trackinfo').html(data);
$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"}, function(){this.html(data)});

});
return false;
});
})

[Luckychap]

Even better:

$(document).ready(function() {

    $("ul.sc_menu a").click(function() 
    {
           $('#content #mainbg #infobox #trackinfo').animate({opacity:"0"}, function(){
                 $.post('projects-agent.php', {'title': $(this).text()}, function(data) 
                 {
                       $('#content #mainbg #infobox #trackinfo').html(data);
                       $('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});

                 });
                 return false;
           });
      });
})