PDA

View Full Version : [jquery] smooth animation on sliding menu code tweak help



shecky981
03-23-2008, 02:18 AM
hi all, new to both this forum and jquery in general. here is my problem:

a very generous user at another forum (http://indexhibit.org/forum/thread/761/) donated his code to the community to make a sliding vertical menu using jquery. you can see his menu in action here: http://www.elarcadenoe.es/

his code for the menu is here:



$(document).ready(function()
{
// First we hide all exhibitis

$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed

$("#menu ul").each(function(){
$(this).find("li.active").prevAll().nextAll().show();
});

//This is the toggle function

$("#menu ul li.section-title").click(function(){
$(this).nextAll().slideToggle("fast");
});

});


it works quite well, however you notice as you click around his menu, it does not close sections as you open new ones, so you get a somewhat jerky feel when you click on a sublink to go into a project, all the menus abruptly close.

i am trying to figure out a way to have it so that (for example) if 'print' is open, clicking on 'screen' slides open 'screen' and slides closed 'print' at the same time.

i have been futzing with the code and i found that adding this last line (in bold):


$(document).ready(function()
{
// First we hide all exhibitis

$("#menu ul li.section-title").nextAll().hide();

// then the active exhibit is showed

$("#menu ul").each(function(){
$(this).find("li.active").prevAll().nextAll().show();
});

//This is the toggle function

$("#menu ul li.section-title").click(function(){
$(this).nextAll().slideToggle("fast");

$("#menu ul li.section-title").nextAll().hide();
});

});


does close the open sections but does it very jerkily. since i am positive i am doing this tottally wrong, can someone please let me know what the correct line(s) of code would be to get the effect i want.

thanks much in advance!

harbingerOTV
03-25-2008, 12:07 AM
$("#menu ul li.section-title").click(function(){
$(this).nextAll().slideToggle("fast");

$("#menu ul li.section-title").nextAll().slideUp('fast');
});


try that. What it appears is that he just said slide the currnet one down and just hide the rest, not applying any kind of transition to the effect.

there are a lot of jQuery accordians out there as well.

http://www.learningjquery.com/2007/03/accordion-madness