Using Jquery animate() with a delay to load 2 different div

Using Jquery animate() with a delay to load 2 different div

Hi,
I am new here, and I hope I post in the good section.
I'm currently working on a mini-educational game for the primary school where my children are. I have some basic html, php, mysql, but I am a newbie with jquery ...

I built a quiz, and when the schoolchildren get good answers, they win a fish to place in a virtual aquarium. The fishes are png files, and I found a great way on the web to animate them  with this code

  1.     <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         animateDiv();
  4.    
  5.     });
  6.    
  7.     function makeNewPosition(){
  8.        
  9.         // Get viewport dimensions (remove the dimension of the div)
  10.         var h = $('#global').height() - 64;
  11.         var w = $('#global').width() - 80;
  12.        
  13.         var nh = Math.floor(Math.random() * h);
  14.         var nw = Math.floor(Math.random() * w);
  15.        
  16.         return [nh,nw];   
  17.        
  18.     }
  19.    
  20.     function animateDiv() {
  21.         var $target = $('#a');
  22.         var newq = makeNewPosition($target.parent());
  23.         var oldq = $target.offset();
  24.         var speed = calcSpeed([oldq.top, oldq.left], newq);
  25.    
  26.         $('#a').animate({
  27.             top: newq[0],
  28.             left: newq[1]
  29.         }, speed, function() {
  30.             animateDiv();
  31.         });
  32.    
  33.     };
  34.    
  35.     function calcSpeed(prev, next) {
  36.    
  37.         var x = Math.abs(prev[1] - next[1]);
  38.         var y = Math.abs(prev[0] - next[0]);
  39.    
  40.         var greatest = x > y ? x : y;
  41.    
  42.         var speedModifier = 0.05;
  43.    
  44.         var speed = Math.ceil(greatest / speedModifier);
  45.    
  46.         return speed;
  47.    
  48.     }
  49.     </script>

  50.     <script type="text/javascript">
        $(document).ready(function() {
            animateDiv();
       
        });
       
        function makeNewPosition(){
           
            // Get viewport dimensions (remove the dimension of the div)
            var h = $('#global').height() - 64;
            var w = $('#global').width() - 80;
           
            var nh = Math.floor(Math.random() * h);
            var nw = Math.floor(Math.random() * w);
           
            return [nh,nw];   
           
        }
       
        function animateDiv() {
            var $target = $('#a2');
            var newq = makeNewPosition($target.parent());
            var oldq = $target.offset();
            var speed = calcSpeed([oldq.top, oldq.left], newq);
       
            $('#a2').animate({
                top: newq[0],
                left: newq[1]
            }, speed, function() {
                animateDiv();
            });
       
        };
       
        function calcSpeed(prev, next) {
       
            var x = Math.abs(prev[1] - next[1]);
            var y = Math.abs(prev[0] - next[0]);
       
            var greatest = x > y ? x : y;
       
            var speedModifier = 0.05;
       
            var speed = Math.ceil(greatest / speedModifier);
       
            return speed;
       
        }
        </script>


















































I have two div a like this :

  1.  <div id="a"><img src="fishX.png" /></div>
  2. <div id="a2"><img src="fishY.png" /></div>

and it works perfectly, the two div are animated and the illusion is perfect !

But to be more realistic, I would like to perform something like that :

When the fish swim left to right, I would like to load a div with the fish with head at right, and when the fish swim right to left, another div with its head  at left(simply with inverting the png in each div,  it's not the problem).

I tried to combine a fadeOut method with the delay, but it won't work. (the fadeOut and delay works itself i, but when I combine the both method, animate and fadeOut, it won't work) I added this to display the 2 differents div :

  1.       jQuery(document).ready(function(){
  2.         $("#a").delay(2000).fadeOut(500);
  3.         $("#a2").delay(3000).fadeIn(500);
  4.         $("#a2").delay(3000).fadeOut(500);
  5.     });
But the both div  #a and #a2 are displayed ...
Any idea what should I do to display only one div at a time ?

Another solution could be to detect  when the fish swim to the right into the animate function and to display the div #a and when the fish swim to the left, displaying the #a2 div... but it's too hard for my level..

Thanks in advance
Ludo