Hopefully, my title wasn't too lengthy. This is my first question, so please be patient with me.
I have a group of divs inside my .navicons div that I want to use as triggers for offscreen elements (#wdFoot, #wpFoot, #gdFoot) to move up into view from the bottom of the screen when hovered over. I've managed to achieve this effect using .hover and .animate, but for better usability, I would like the animated footer elements to remain raised on the screen even when the user moves their mouse from the trigger area to the raised foot elements.
Here's what I currently have:
<div class="navicons">
<div id="wdicon"><!-- triggering divs -->
Wd
</div>
<div id="wpicon">
Wp
</div>
<div id="gdicon">
Gd
</div>
</div>
<section id="wdFoot" class="footNav"><!-- once they appear on screen, I want these to stay visible when the user moves the mouse from the triggers to this area -->
<h2>Wd Foot</h2>
</section>
<section id="wpFoot" class="footNav">
<h2>Wp Foot</h2>
</section>
<section id="gdFoot" class="footNav">
<h2>Gd Foot</h2>
</section>
CSS//
body{
overflow:hidden;
}
div.navicons{
width:auto;
position:absolute;
margin:0 auto;
}
.navicons > div{
width:80px;
height:80px;
border:2px solid rgba(178,178,178,.08);
border-radius:50%;
text-align:center;
display:inline-block;
transition:all .05s;
}
.navicons > div:hover{
border:2px solid #1f88e1;
}
section.footNav{
width:100%;
height:240px;
background-color:rgba(51,51,51,.7);
position:absolute;
bottom:-240px;
}
jQuery//
$( '#wdicon' ).hover(function() {
$( "#wdFoot" ).animate({'bottom':'0'}, 500);
},function(){
$("#wdFoot").animate({'bottom':'-240px'}, 500);
});
$( '#wpicon' ).hover(function() {
$( "#wpFoot" ).animate({'bottom':'0'}, 500);
},function(){
$("#wpFoot").animate({'bottom':'-240px'}, 500);
});
$( '#gdicon' ).hover(function() {
$( "#gdFoot" ).animate({'bottom':'0'}, 500);
},function(){
$("#gdFoot").animate({'bottom':'-240px'}, 500);
});
Check out the JSFiddle link for a demo.
If you know of an easier or shorter way to write my jQuery code, please share it with me.
Thank you!