jquery script up-down controls
<p>can someone help me on this. im a newbie in jquery. i have an up and down controls for my menu. and the contents will be targeted on the right nav.. everything was working. except for the "down control" i tried to reverse the "code from the up control" to make it works. by the way i just modified a existing code for the up controls. Thanks in advance. :)</p>

<p>here's the js code:</p>

<pre><code>$(document).ready(function () {
    // ######################################## Block B code - START

var height = $('#blockB a').height(); // get the height of the first image in block B
var timeout = 0;


function nextA() {
     clearTimeout(timeout);
    $('#blockB').css({ bottom: 0 }); // set style bottom:0px to div with id = blockB 
    $('#blockB').animate({ bottom: "0" },0); // make image move 73 px to the bottom with animated effect for 600 ms
    $('#blockB a:last-child').prependTo('#blockB'); // take the last image and add  the top in the save div i.e id= blockB

    // ########################################## Block B code - END 

    // ########################################## Block A code - START
    var count = $("#blockB a").length;
    $myclone = $('#blockB a:nth-child('+(count-2)+')').clone();

    $('#blockB a:nth-child('+(count-3)+')').addClass('selected');
    $('#blockB a:nth-child('+(count-2)+')').removeClass('selected');

   // var image_manipulation = $myclone.html(); // contains something like : &lt;img src="banners/xmenfirstclass_small.jpg" alt="" class="min"  /&gt;
   //$big_image  = image_manipulation.replace(/thumb-/, 'b-'); original code        

   $big_content = $('#content' + $('#blockB a:nth-child(' + (count-3) +  ')').attr("contentid")).clone().html(); //content to right/scroll 

    // we now remove the text "_small" from the image src to make it like :  &lt;img src="banners/xmenfirstclass.jpg" alt="" class="min"  /&gt;
    // we did this because we need to point it to the larger image 

    $('#blockA').html($big_content); // insert the larger image in our Block A
     return false; //to stop the autoscroll..
    //$('#blockA img').removeClass("min").addClass("max"); //remove the class 'min' associated with image and insert class max.
    //alert($('#blockA').html());
    //E.g  &lt;img src="banners/xmenfirstclass.jpg" alt="" class="max"  /&gt;
  //  $('#blockA img').css({ opacity: 0 }) // Make the image invisible by adding a css style opacity:0.
    //We did that because we want to make the larger image fade in.
//  .animate({ opacity: 1 }, 600); //Put back the opacity to 1 in 600 Millisecond =&gt; Produce a face in effect

    //########################################## Block A code - END
    timeout = setTimeout(function () { // call the function nextA() repeatedly evey 5000 ms
       nextA();
    }, 5000);

}
</code></pre>

<p>//mouse  events</p>

<pre><code>$('#bi-button')
    .css({ opacity: 1 })
    .bind('keydown mousedown', function () {
        $(this).addClass('btn-down'); //give the impression button is pressing 
    })
    .bind('keyup blur mouseup mouseleave', function () {
        $(this).removeClass('btn-down'); //give the impression button is being released
    })
    .click(function () {    //When user clicks the "Arrow" button

        nextA();
        return false;   // make the image 'rotate' through the list
    });
</code></pre>
