jquery animation problems
I am modifying this example: http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial
The problem is that when I try to horizontally animate a particular <div> menu item. It doesn't work.
//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'});
However if I change #m01 to say #menu 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.
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.
Full code, Note I changed the code from the tutorial from li items to divs because I thought originally maybe I could not animate li items individually:
JS Bin Link: http://jsbin.com/isama
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scroll Menu</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(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});
});
});
</script>
<style>
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;
}
</style>
</head>
<div id="debugging_mouse_axis"></div>
<div id="debugging_status"></div>
<div id="sidebar">
<div id="menu">
<div id="m01" class="menu_item"><a href="#" id="01">MENU ITEM 1</a></div>
<div id="m02" class="menu_item"><a href="#" id="02">MENU SIZE 2 <span> / 2007</span></a></div>
<div id="m03" class="menu_item"><a href="#" id="03">MENU SIZE LONG 3 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 4 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 5 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 7 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 8 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 10 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 11 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 13 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">SUPER LONG MENU MENU MENU MENU SIZE 14 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 16 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 17 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 19 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 20 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 22 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 5 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 24 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 25 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 27 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 28 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 30 <span> / 2007</span></a></di开发者_开发百科v>
<div class="menu_item"><a href="#">MENU SIZE 31 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU 33 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE 34 <span> / 2007</span></a></div>
<div class="menu_item"><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></div>
</div>
</div>
</body>
</html>
Change #m01 to relative positioning.
By default, all elements have the property position set to static. Since left will only affect elements positioned absolute, relative or fixed, the animation will not be visible.
When you run the animation on #menu, it works because #menu is positioned relative.
Just give #m01 position: relative; and it will work.
加载中,请稍侯......
精彩评论