Develop Reference

jQuery fadeIn() and fadeOut() with stop(), how to solve incorrect height?

I have a menu with some submenus and want to have a nice effect with jQuery .fadeIn() and .fadeOut() problem is, if a user do a "hover" effect to fast, then goes back to his menu item, this menu item has a height from 5,6 pixels and can't be opened, how can i reset height after every hover effect? I think problem is in .stop() function, but i have no idea how to solve this?
My jQuery code is:
$('#main_menu > li').hover(
function () {
$('ul', this).stop().fadeIn(300);
},
function () {
$('ul', this).stop().fadeOut(300);
}
);

I think you need to swap the order to stop() and fadeIn()/fadeOut(), because your second stop() may terminate the first fadeIn() when it is still running.
$('#main_menu > li').hover(
function () {
$('ul', this).fadeIn(300).stop();
},
function () {
$('ul', this).fadeOut(300).stop();
}
);
It may be easier if you can give out a JSFiddle.

Simple jquery click event script, its a loop

I have a simple jQuery script. This is the script:
var menu = $('#nav .menu');
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').slideUp();
});
This script open a submenu. But i have a problem with this script. If you go over it quickly. The script launch every time. When you go over the item verry quickly. The menu open a lot of times. How can i fix this?
Thank for help

use jQuery's .stop() function. Passing in the necessary arguments ex. .stop(true,true),.stop(true)
$('li', menu).mouseenter(function() {
$(this).find('.sub-menu').stop().slideDown();
}).mouseleave(function(){
$(this).find('.sub-menu').stop().slideUp();
});
or passing this as the context seems a little neater to me - it does the same thing as .find()
$('li', menu).mouseenter(function() {
$('.sub-menu',this).stop().slideDown();
}).mouseleave(function(){
$('.sub-menu',this).stop().slideUp();
});

Use this way:
$('#nav .menu li').hover(function() {
$('.submenu').stop().slideDown();
}, function(){
$('.submenu').stop().slideUp();
});

Expand vertical drop down menu on hover instead of click

I have an expandable vertical drop down menu that currently expands when first level items are clicked, however I want it to expand when the menu item is hovered over instead. The original script is:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
I changed .click(function to .hover(function and this works, however I don't know if it is the best way to do it. Can anyone advise if there is a better way to acheive this? You can see a working example of the .click version of the menu on the left hand side of the page by clicking here. Thanks!

Changing it to hover is acceptable. It's definitely very readable code, which is the important thing. However, there is one issue - as Daniel comments, it'll make your menu impossible to navigate on a touch device, which means that you're making the site inaccessible on every mobile phone and tablet*. This is a very bad thing, but there are a few things you can do.
For instance, the jQTouch library has some awesome touch-specific event handling that would let you optimize your menu for mobile users. Otherwise, you could wrap your menu's JavaScript logic in a conditional, or you could assign each action to both touch and click.
*except for phones and tablets with mice (a very atypical use case.)

Prevent events to be triggered unecessarily

$('#menu > li').hover(function(){
$(this).find('ul').slideDown();
});
$('#menu > li').mouseleave(function(){
$(this).find('ul').slideUp();
});
this works fine, but if i hover/leave an <li> item of the menu many times and very fast, once i stop i will see it slide up and down as many times as i hovered,
please watch this sort video capture
http://www.screenr.com/dkes
¿how can that be prevent?

You can use stop to stop the current animation. You could also combine your two event handlers and just use hover (which can take 2 arguments, the first is a function to run on mouseenter, the second a function to run on mouseleave):
$('#menu > li').hover(function() {
$(this).find('ul').stop(true, true).slideDown();
}, function() {
$(this).find('ul').stop(true, true).slideUp();
});
The first argument is clearQueue, which will stop the animations queueing up endlessly as you hover repeatedly. The second argument is jumpToEnd, which forces any currently running animation to end before starting a new one.
Here's a simple example.

It all boils down to you having a variable that will store the state of your sliding and will prevent further requests from happening if a sliding is already taking place.
Set the flag at the beginning of sliding and use callback to unset the flag.
var closing = false;
$('#menu > li').mouseleave(function(){
closing = true;
$(this).find('ul').slideUp(null, function(){
closing = false;
});
});
// then in the hover method you would just check the value of closing to see if to allow or not opening.
The second idea was exposed a little earlier by James Allardice, and I like it more if it works.

click li, go to next li

Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});

Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});

After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});