I am testing a design based on Chris' AWESOME Wordpress tutorial series on Lynda.com. The hoverflow plugin is used to animate navigation. There is a 3D effect that is achieved by adding tags to every navigation . The hoverFlow works like a charm, except when you hover over the different buttons quickly. The portion then seems to dissapear for a millisecond, and re-appear magically. This messes up the overall look and feel of course.
I tried lots of things to solve this, but I am simply unable to find the error which is causing the behavior. At first I thought it had something to do with overflow:hidden, but I can't get it to work.
Is there anyone out there that can point me in the right direction?
I tried lots of things to solve this, but I am simply unable to find the error which is causing the behavior. At first I thought it had something to do with overflow:hidden, but I can't get it to work.
Is there anyone out there that can point me in the right direction?
I have a testsite setup here.
The navigation script is as follows:
// when the DOM is ready
$(function() {
$(".menu-navigatie-container li a").append('<span></span>');
$(".menu-navigatie-container a").hover(function(e) {
$(this)
.hoverFlow(e.type, { width: 210 }, 200)
.css('overflow', 'visible')
.find ('span')
.hoverFlow(e.type, { width: 5}, 200)
}, function(e) {
$(this)
.hoverFlow(e.type, { width: 200 }, 200)
.css('overflow', 'visible')
.find ('span')
.hoverFlow(e.type, { width: 10}, 200)
});
})
Thanks heaps!
yeah, it's somehow related to the overflow property. i guess it's set and removed by jQuery somewhere on the way.
i solved the issue by setting the overflow property on the link itself instead of the span:
#menu-navigatie li a {
overflow: visible !important;
}
/ralf
you're my HERO! Thanx, this solved it!
Btw, sorry for the late reply, I hadn't noticed the reaction to my request!
Thanks a lot Ralf!...
I was having the same problem with a nav menu!