Hello All,
I'm new to the site and need some help!
I need buttons that when rolled over, they reveal a table (I got that done), as well as change their own image to a tab (which they do), but keep that rollover tab image until the mouse leaves either the button or its respective table (this is the problem).
Basically, it's pretty easy to get it to change images, and to have to tables expand and disappear properly, but I can't get the buttons to return to their original image when you move away from them or the table they belong to.
I got a line of code that makes them behave like a regular rollover, but it's no good because the table below is not nested within the same object and thus the image rolls back when I want it to remain rolled over.
I'm aware that the fact that my buttons and their tables are not nested together complicates things, because I can not traverse with children or ancestors, but I'm hoping there's a way around that.
Below is my sample code, which is pretty screwy for what I'm trying to do since the person I'm working for wanted a lot of sequential animation of different parts.
Here is the HTML:
<div id="topNavBar">
<a href="#" class="topButton" id="how">
<img src="images/howBut.jpg" alt="How" name="How" width="140" height="44" border="0" />
</a>
<a href="#" class="topButton" id="who">
<img src="images/whoBut.jpg" alt="Who" name="Who" width="140" height="44" border="0" />
</a>
</div><!--end of topNavBar-->
</div><!--end of pageHeader, part of earlier code-->
<div id="subMenus"><!--serves as a 150px spacer to give room for expanding tables-->
<div class="subMenuBackground" id="how">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
<div class="subMenuBackground" id="who">
<table class="subMenuOptions" border="0" cellpadding="0" cellspacing="1">
<tr><td>Table stuff goes out here</td></tr>
</table>
</div>
</div><!--End of subMenus-->
And here is my JavaScript/jQuery:
$(document).ready(function(){
$('.subMenuOptions').css({'opacity': 0.0});
$('.subMenuBackground').css({
'height': '0px',
'padding': '0px',
'width': '0px',
'marginLeft': 'auto',
'marginRight': 'auto',
});
// ***This makes a normal rollover just fine***
// $('a#how img').mouseenter(function(){
// $(this).attr('src', $(this).attr('src').split('.').join('Over.'));
// }).mouseleave(function(){
// $(this).attr('src', $(this).attr('src').split('Over.').join('.'));
// });
$('#how').mouseenter(function(){
$('.subMenuBackground#how').animate({paddingTop:'2px'}, 'slow', 'quartEaseInOut')
.animate({width:'100%', paddingRight:'2px', paddingLeft:'2px'}, 350, 'circEaseOut')
.animate({height:'100%', paddingBottom:'2px'}, 250, 'circEaseOut', function(){
$(this).children().animate({opacity:1}, 250, 'circEaseOut');
});
// This works to make the rollover tab image to appear, but mirroring this function in the other two .mouseleave events doesn't work :(
$('a#how img').attr('src', 'howButOver.jpg');
});
$('.subMenuBackground#how').mouseleave(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// For whatever reason, the previous function did not work if I rolled over other buttons - the table would not disappear, so I had to make this specific function for when you entered another top nav button
$('.topButton:not(#how)').mouseenter(function(){
$('.subMenuBackground#how').animate({width:'0%', paddingRight:'0px', paddingLeft:'0px'}, 100, 'quartEaseIn')
.animate({height:'0%', paddingTop:'0px', paddingBottom:'0px'}, 100, 'quartEaseIn', function(){
$(this).children().animate({opacity:0}, 1, 'quartEaseOut');
});
});
// I was hoping it would be as easy as this, but this does not work.
$('#how').mouseleave(function(){
$('a#how img').attr('src', 'howBut.jpg');
});
});