jquery animation problems
<p>I am modifying this example: <a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial" rel="nofollow">http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial</a></p>

<p>The problem is that when I try to horizontally animate a particular <code>&lt;div&gt;</code> menu item. It doesn't work.</p>

<pre><code>//Animate the LI on mouse over, mouse out
    $('.menu_item').click(function () { 
     //Make LI clickable
     clickedItem = event.target.id;

     //alert(clickedItem);

     $("#m01").animate({left:"600px"},{duration: 3000,easing: 'easeOutQuad'});
</code></pre>

<p>However if I change <code>#m01</code> to say <code>#menu</code> which is the container for all menu items. The animation works fine AND the vertical scrolling will continue to function perfectly while the horizontal animation happens.</p>

<p>The basic final effect I am trying to achieve is that the menu will be hidden off screen except for a few 'tabs' and when these are moused over the will slide out to show the menu item.</p>

<p>Full code, Note I changed the code from the tutorial from <code>li</code> items to <code>divs</code> because I thought originally maybe I could not animate <code>li</code> items individually:</p>

<p>JS Bin Link: <a href="http://jsbin.com/isama" rel="nofollow">http://jsbin.com/isama</a></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
&lt;head&gt; 
&lt;title&gt;Scroll Menu&lt;/title&gt; 

&lt;script type="text/javascript" src="jquery-1.3.1.min.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="jquery.easing.1.3.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript" src="jquery.color.js"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt; 


$(document).ready(function() {  

    //Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';

    //Default Padding
    var defpadLeft = $('.menu_item a').css('paddingLeft');
    var defpadRight = $('#menu_item a').css('paddingRight');

    //The ID of the menu item clicked
    var clickedItem;

    //Animate the LI on mouse over, mouse out
    $('.menu_item').click(function () { 
     //Make LI clickable
     clickedItem = event.target.id;

     //alert(clickedItem);

     $("#m01").animate({left:"600px"},{duration: 3000,easing: 'easeOutQuad'});
     //window.location = $(this).find('a').attr('href');

    //}).mouseover(function (){
    }).mouseover(function(){

     //mouse over LI and look for A element for transition
     //$(this).find('a')
     //$(this).find('li').animate({left:"100px"},{duration: 500,easing: 'easeOutQuad'});
     //$(".menu").animate({left:"-38px"},{duration: 700,easing: 'easeOutQuad'});

     //.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
     //.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {

     //mouse oout LI and look for A element and discard the mouse over transition
     $(this).find('a')
     .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
     .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    }); 

    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {

     //Sidebar Offset, Top value
     var s_top = parseInt($('#sidebar').offset().top);  

     //Sidebar Offset, Bottom value
     var s_bottom = parseInt($('#sidebar').height() + s_top);

     //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
     var mheight = parseInt($('.menu_item').height() * $('.menu_item').length);

     //I used this coordinate and offset values for debuggin
     //$('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
     //$('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));

     //Calculate the top value
     //This equation is not the perfect, but it 's very close 
     var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);

     //Animate the #menu by chaging the top value
     $('#menu').animate({top: top_value}, { queue:false, duration:500});
    });


});

&lt;/script&gt; 

&lt;style&gt; 
body {
padding:0;
margin:0 0px;
}

#sidebar {
height:400px;
overflow:hidden;
position:relative;
left:-50px;
background-color:#eee;
}   

#menu {
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}

.menu_item {
padding:10px 0;
text-align:left;
display:block;
cursor:hand;
cursor:pointer;
}

.menu_item a {
background:url() repeat #1f1f1f;

color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}

.menu_item span {
font-family:georgia, arial;
font-size:9px;
color:#464646;
}

&lt;/style&gt; 
&lt;/head&gt; 

&lt;div id="debugging_mouse_axis"&gt;&lt;/div&gt; 
&lt;div id="debugging_status"&gt;&lt;/div&gt;

&lt;div id="sidebar"&gt; 
&lt;div id="menu"&gt; 
&lt;div id="m01" class="menu_item"&gt;&lt;a href="#" id="01"&gt;MENU ITEM 1&lt;/a&gt;&lt;/div&gt; 
&lt;div id="m02" class="menu_item"&gt;&lt;a href="#" id="02"&gt;MENU SIZE 2 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div id="m03" class="menu_item"&gt;&lt;a href="#" id="03"&gt;MENU SIZE LONG 3 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 4 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 5 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 6 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 7 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 8 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 9 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 10 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 11 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 12 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 13 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;SUPER LONG MENU MENU MENU MENU SIZE 14 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 15 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 16 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 17 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 18 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 19 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 20 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 21 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 22 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 5 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 23 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 24 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 25 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 26 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 27 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 28 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 29 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 30 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 31 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 32 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU 33 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE 34 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;div class="menu_item"&gt;&lt;a href="#"&gt;MENU SIZE LONG 35 &lt;span&gt; / 2007&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt; 

&lt;/body&gt; 
&lt;/html&gt;
</code></pre>
