Can anyone point me in the right direction with this?
I have an interactive menu on my potfolio page
http://nesteggdesigns.co.uk/portfolio/main.html, it is split up in to different boxes which, when hovered over, display a slider over the top of each relevant box, this slider div contains info etc.
The problem that i am having is every time the box is hovered over the animation seems to slow down each time and also I need to be able to only use the amination when the mouse is on it for a longer period of time, or it gets stuck and just goes backwards and forwards its really irritating. Please help me it would be appreciated so much!!
here is a copy of one of the boxes
<div class="nav fadeout lbox b">
<img class="portfolio_images img2" src="images/display2.png" width="280px" alt="mac computer web design hull" class="navimg img1">
<div class="boxbslider sliders">
<img src="" alt="" class="logo">
<p class="slidertext">lorem ipsum dolor sit amet, consectetur </p>
</div>
</div>
and one of the jquery functions
(function(){
var
divb = $('div.b'),
boxb = $('div.boxbslider'),
slider = {
init:function(){
divb.on('mouseover', function(){
boxb.animate({'top' :'0px'}, 300)
divb.on('mouseleave', function(){
boxb.animate({'top':'-200px'}, 300);
});
});
}
};
slider.init();
}());
thankyou so much you dont even understand how much you can help me here xx