[jQuery] Superfish Animation Issue

[bfopma]

Hi,

I am experiencing the following problem with the Superfish plugin.  I
have a series of drop down menus that slide down upon hovering over
their parent.  However, I have noticed the following issue with menu
items not displaying.  I can reproduce the problem as follows:

1) Hover over a parent menu item
2) Move quickly to another parent menu item before the menu has fully
completed its animation
3) Move back to the parent item in #1

The result is that the menu does not expand until I hover over another
item and then go back to it.  My Superfish initialization settings are
as follows:

//Initialize Main Menu
$("ul.sf-menu").superfish({
autoArrows: false,
animation:   {opacity:'show',height:'show'},
dropShadows: true,
delay: 400,
speed: 'normal'
});

The behavior only occurs when I animate the menus.  If I remove the
animation I do not experience the problem.  Please see
http://www2.dordt.edu/athletics/soccer/women/ for an example of the
above.

Thanks,
Brady

[jQuery] Superfish animation when hiding menus?

[TommyB]

Hello,

Does Superfish support hiding menus with animation as well as when
showing them?

Thanks,

TommyB

[jQuery] Superfish animation

[bombaru]

How do I kill/override the animation methods that are built into the
code?  I'm not a fan of the opacity or height methods and would like
to see this menu without these additions.  Is this the line that needs
tweaking (and if so, can someone show me how)?

$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul);
o.onShow.call($ul); });

[jQuery] superfish animation (yet another )

[justrox420]

I have recently ripped the nav down to attempt to get it to work for
my own site.  applying only the nav into a raw page, I still can't
seem to get the animation to work in either FF or IE7. I've scoured
this message group, but nothing seems to be working.  Is there
anything you can see in it that could be making the animation fail?

test can be found here:
http://agapeboardingschool.org/NEW/nav_test.html

thanks

[jQuery] Superfish animation problem in ie

[bennyboy79]

Hi,

i recently came across Superfish and i think its amazing. i am however
having a problem with the opacity:"show" animation in ie. it works
fine in ff but when i try my menu in ie7, the right border and top
menu item of the selected drop down menu item appear after the rest of
the menu when selected. you can see what i mean here: 
http://www.thepixelhouse.com/byl
(Superfish is only on this page at the moment)

Any ideas why this is happening?

this is my CSS:


/* remove any default styles */
.nav, .nav * {
top:-34px;
margin:0;
padding:0;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}

/* top ul.nav element */
.nav {
line-height:1.0;
font-weight:bold;
}

/* nested submenu ul elements */
.nav ul {
position:absolute;
top:-999em;
width:165px;
}

/* top level spacing and arrows */
.menu li.home {width:60px;}

.menu li.aboutus {width:105px; background:url(drop3/downarrow.gif)
90px 16px no-repeat;}
.menu a.abouttopdrop:hover{background:url(drop3/wdownarrow.gif) no-
repeat 90px 16px;}
.menu :hover > a.abouttopdrop, .menu ul ul :hover > a.abouttopdrop
{color:#fff;background:url(drop3/wdownarrow.gif) no-repeat 90px 16px;}

.menu li.dis {width:110px; background:url(drop3/downarrow.gif) 99px
16px no-repeat;}
.menu a.distopdrop:hover{background:url(drop3/wdownarrow.gif) no-
repeat 99px 16px;}
.menu :hover > a.distopdrop, .menu ul ul :hover > a.distopdrop
{color:#fff;background:url(drop3/wdownarrow.gif) no-repeat 99px 16px;}

.menu li.courses {width:89px; background:url(drop3/downarrow.gif) 79px
16px no-repeat;}
.menu a.coursestopdrop:hover{background:url(drop3/wdownarrow.gif) no-
repeat 79px 16px;}
.menu :hover > a.coursestopdrop, .menu ul ul :hover > a.coursetopdrop
{color:#fff;background:url(drop3/wdownarrow.gif) no-repeat 79px 16px;}

.menu li.articles {width:80px;}

.menu li.links {width:72px; background:url(drop3/downarrow.gif) 59px
16px no-repeat;}
.menu a.linkstopdrop:hover{background:url(drop3/wdownarrow.gif) no-
repeat 59px 16px;}
.menu :hover > a.linkstopdrop, .menu ul ul :hover > a.linkstopdrop
{color:#fff;background:url(drop3/wdownarrow.gif) no-repeat 59px 16px;}

.menu li.vacancies {width:100px; background:url(drop3/downarrow.gif)
90px 16px no-repeat;}
.menu a.vactopdrop:hover{background:url(drop3/wdownarrow.gif) no-
repeat 90px 16px;}
.menu :hover > a.vactopdrop, .menu ul ul :hover > a.vactopdrop
{color:#fff;background:url(drop3/wdownarrow.gif) no-repeat 90px 16px;}

.menu li.contact {width:100px;}

/* all li elements */
.nav li {
float:left;
position:relative;
z-index:99;
}

/* all anchor elements */
.nav a {
display:block;
}

/ Position of second tier of nav /
.nav li:hover ul,
ul.nav li.sfHover ul
{
left:0px;
top:68px;
}

/ Position of third tier of nav /
.nav li:hover li ul,
.nav li.sfHover li ul {
top:-999em;
}

.nav li li:hover ul,
ul.nav li li.sfHover ul
 {
left:167px;
top:40px;
}

.nav li li:hover li ul,
.nav li li.sfHover li ul {
top:-999em;
}

.nav li li li:hover ul,
ul.nav li li li.sfHover ul
 {
left:167px;
top:40px;
}





.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
top: -999em;
}


embed, object {
position: relative;
z-index: 0;
}


.nav {

float:left;
}
.nav li {
background:#f0d55b;
text-align:center;
}
.nav a, .nav a:visited {
color: #000;
padding: 9px 0px 9px 0px;
text-decoration:none;
}

.nav a:hover {
color:#fff;
}

.nav ul a{
width: 165px;
padding: 10px 0px;
text-indent: 0;
}

.nav li:hover, .nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
background:#f0d55b; /* hover highlight */
color:#fff;
}

.nav ul li:hover, .nav ul li.sfHover,
.nav ul a:focus, .nav ul a:hover, .nav ul a:active {
background:#4282a1; /* hover highlight */
width:165px;
}
.nav li li {
background:#f0d55b;
font-weight:normal;
text-align:left;
font-size:12px;
border-left:2px solid #f0d55b;
border-right:2px solid #f0d55b;
}
.nav li li li {
background:#f0d55b;
border-left:1px solid #fff;
}

.nav a.subfish {background:url(drop3/arrow.gif) 155px center no-
repeat;}
.nav a.subfish:hover {background:url(drop3/arrow_over.gif) 155px
center no-repeat;}

---

and it is called using

$(document).ready(function(){
$(".nav")
.superfish({
animation : { opacity:"show"},
delay : 0
})

.find(">li:has(ul)")
.mouseover(function(){

[jQuery] superfish animation issues

[brian jacobs]

Joel Birch--
It looks like you released version 1.4 of superfish.  In firefox
anyway, if you go to the horizontal menu page, you'll notice that the
menu is not animated anymore.  Downloading and using version 1.4
cripples my 1.3.4 based menu.  Thought you'd like to know.
-Brian

[jQuery] Superfish animation out?

[Lewis]

Howdy

Just a quick question: I have a reasonable understanding of CSS and
HTML - but am very much a 'noob' when it comes to the mighty JQuery
(but i'm getting there - slowly!) - I was wondering if anyone has any
ideas on creating the reverse drop down animation on mouse out? i.e.
rollover the menu the drop down slides down - roll out of the menu
item the drop down slides back up...!?!?

I have a reasonable knowledge of Flash, so understand that this
principle isn't as easy as it immediately appears - but was wondering
if anyone has tackled it yet??

thanks

Lewis