How do I synchronize two or more animations on the same page?

[drayarms]

Hello folks, I guess my problem is not so much about keeping the animations in synch as it is keeping them from screwing up each other.  I have two animations, on the same page within two  saparate document.ready method.  One of them fades in and fades out 3 images (belonging to the css class g_img) cyclically, and the other slides in and out three other images (belonging to the class slogans) also cyclically.  each of the functions that run these respective animations work fine just as intended when included within the document ready function seperately but when I include them together as in the code presented below, they start behaving weird.  For example, one of them is animated in the sequence 1,2,2,1,3,2,1,3,2,1,3,2... instead of the normal 1,2,3,1,2,3...

Even when I placed the animations in the same document.ready functions, I got something similar to the above.  How can I fix this?

 

Ps: I just uploaded the page which is still under construction to the following url  http://mygeneric.info/green/index.html  so you can actually visualize what's going on.

              		<script type = "text/javascript">


		$(document).ready(function() {


			//First image in non js compliant browsers is by default displayed. Hide it for compliant browsers



			$("#green_car").hide;



			//Do same for the first slogan(smart business). Smaart business is positioned to be displayed for non js browsers.



			 $(".slogans").hide();$("#smart_business").css("left","245px");

			(function($) {


				//The fade in out function.

    					$.fn.fader = function() {

       						var elements = this;

            					l = elements.length;

            					i = 0;			

        					function execute() {

            					var current = $(elements[i]);

            					i = (i + 1) % l;

            					current

                					.fadeIn(1000)

                					.delay(8000)

                					.fadeOut(1000,execute);

        					}

        					execute();

                                        //Run the function.

        					return this;

                                       //Making this available again to the outer function.


   				 	};

			})(jQuery);

			$(".g_img").fader();

		}); 

	</script>





























	<script type = "text/javascript">

		$(document).ready(function() {

			//Do same for the first slogan(smart business). Smaart business is positioned to be displayed for non js browsers.
			 $(".slogans").hide();$("#smart_business").css("left","245px");

			(function($) {

					//The slide in out function.

    					$.fn.slider = function() {

       						var elements1 = this;

            					l = elements1.length;

            					i = 0;
				        					     function execute1() {

            					var current1 = $(elements1[i]);

            					i = (i + 1) % l;

					current1.fadeIn(100).animate({'marginLeft' : '-=240px'},500)

					       .delay(8000)

					       .animate({'marginLeft' : '+=240px'},500)

					       .fadeOut(100,execute1);


        					}

        					execute1();

                                             //Run the function.


        					return this;

                                            //Making this available again to the outer function

               				              			
   				 	};

			})(jQuery);

			$(".slogans").slider(); 

		}); 

	</script>

[drayarms]

Please note that the page doesn't display as intended on firefox.  Still need to work on that. Use any browser but firefox.