944,193 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Easy as for jQuery GURUS!
Ad:
Permalink
Oct 22nd, 2009
0

Easy as for jQuery GURUS!

Expand Post »
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. $(document).ready(function() {
  2.  
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5.  
  6. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});
  7.  
  8. 				$.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  9. 				{
  10. 					$('#content #mainbg #infobox #trackinfo').html(data);
  11. 					$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});
  12.  
  13. 				});
  14. 			return false;
  15. 		});
  16. 	});
Last edited by peter_budo; Oct 25th, 2009 at 5:15 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Similar Threads
Reputation Points: 5
Solved Threads: 0
Light Poster
ablitz is offline Offline
48 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
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
Sponsor
Featured Poster
Reputation Points: 557
Solved Threads: 734
Bite my shiny metal ass!
pritaeas is offline Offline
4,207 posts
since Jul 2006
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
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
Reputation Points: 5
Solved Threads: 0
Light Poster
ablitz is offline Offline
48 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
This is what I've tried and it didnt work

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 	$(document).ready(function() {
  2. 		soundManager.debugMode = false;
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5. 			//$('#mainbg').fadeOut("slow");
  6. 			$('#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"})});
  7.  
  8. 				;
  9.  
  10. 					threeSixtyPlayer.init();
  11. 				});
  12. 			return false;
  13. 		});
  14. 	});
Reputation Points: 5
Solved Threads: 0
Light Poster
ablitz is offline Offline
48 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
This is what I've tried and it didnt work

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 	$(document).ready(function() {
  2. 		soundManager.debugMode = false;
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5. 			//$('#mainbg').fadeOut("slow");
  6. 			$('#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"})});
  7.  
  8. 				;
  9.  
  10. 					threeSixtyPlayer.init();
  11. 				});
  12. 			return false;
  13. 		});
  14. 	});
Reputation Points: 5
Solved Threads: 0
Light Poster
ablitz is offline Offline
48 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
javascript Syntax (Toggle Plain Text)
  1. $(function(){
  2.  
  3. 		$("ul.sc_menu a").click(function() {
  4. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
  5. function(){
  6. alert('animated');
  7. $.post('projects-agent.php', {'title': $(this).text()},
  8. function(data){
  9. alert(data);
  10. $('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').fadeIn('fast');
  12. });
  13. 	});
  14. 			return false;
  15. 		});
  16. 	});
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.
Reputation Points: 18
Solved Threads: 21
Junior Poster
codejoust is offline Offline
180 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
Click to Expand / Collapse  Quote originally posted by codejoust ...
javascript Syntax (Toggle Plain Text)
  1. $(function(){
  2.  
  3. 		$("ul.sc_menu a").click(function() {
  4. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
  5. function(){
  6. alert('animated');
  7. $.post('projects-agent.php', {'title': $(this).text()},
  8. function(data){
  9. alert(data);
  10. $('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').fadeIn('fast');
  12. });
  13. 	});
  14. 			return false;
  15. 		});
  16. 	});
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!!
Reputation Points: 5
Solved Threads: 0
Light Poster
ablitz is offline Offline
48 posts
since Jul 2009
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
May this help
javascript Syntax (Toggle Plain Text)
  1. $(document).ready(function() {
  2.  
  3. $("ul.sc_menu a").click(function() 
  4. {
  5.  
  6. $('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});
  7.  
  8. $.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  9. {
  10. //$('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').animate({opacity:"1"}, function(){this.html(data)});
  12.  
  13. });
  14. return false;
  15. });
  16. })
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006
Permalink
Oct 22nd, 2009
0
Re: Easy as for jQuery GURUS!
Even better:
javascript Syntax (Toggle Plain Text)
  1. $(document).ready(function() {
  2.  
  3.     $("ul.sc_menu a").click(function() 
  4.     {
  5.            $('#content #mainbg #infobox #trackinfo').animate({opacity:"0"}, function(){
  6.                  $.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  7.                  {
  8.                        $('#content #mainbg #infobox #trackinfo').html(data);
  9.                        $('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});
  10.  
  11.                  });
  12.                  return false;
  13.            });
  14.       });
  15. })
Reputation Points: 83
Solved Threads: 61
Posting Pro in Training
Luckychap is offline Offline
442 posts
since Aug 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: mailto error handling
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Password Encrypter


Tags
animate, jquery



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC