Trying to get link Hover animation to stay if clicked.
I have a menu bar made from a <ul> list that if you hover over a link, the tab for that link rises up, just like it would on a mouseOver. And, the tab drops back down when the cursor is moved off it, a mouseOut. If you click on the link while in hover, a div will slide out below. To get rid of the div, one would click the "Hide" link inside the div.
What I'd like to do however, is if a link is hovered over, which raises the tab, if it is clicked and displaying the slide out div, I would like the raised tab to stay in place, and not drop when the cursor is moved away. If the "Hide" link is clicked, then that would be the event to drop the tab back down. Keep in mind that I want to retain the normal hover behavior if not clicked.
How can I do this?
Thank you.
My code follows:
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox1').hide();
$('#slickboxinner1').hide();
$('#slickbox2').hide();
$('#slickboxinner2').hide();
// shows the slickbox on clicking the noted link
$('#slick-show1').click(function() {
$('#slickbox1').show('slow', function(){
$('#slickboxinner1').fadeIn('slow');
});
return false;
});
$('#slick-show2').click(function() {
$('#slickbox2').show('slow', function() {
$('#slickboxinner2').fadeIn('slow');
});
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide1').click(function() {
$('#slickbox1').fadeOut('slow', function() {
$('#slickboxinner1').hide('slow');
});
return false;
});
$('#slick-hide2').click(function() {
$('#slickbox2').fadeOut('slow', function() {
$('#slickboxinner2').hide('slow');
});
return false;
});
$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});
});