Develop Reference

slideDown immediate li and slide up other li elements

I want to slideUp all li element and slideDown li elements under current ul element
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$(this).children("li").slideDown();
$("li").slideUp();
e.stopPropogation();
});
this is the fiddle
Problem is it is sliding up everything in the end
What is the mistake i have done?

You need to target the LIs of all other navs excluding the current one, so use not:
e.g.
$(".nav").hover(function (e) {
$(this).children("li").slideDown();
$(".nav").not(this).find("li").slideUp();
e.stopPropogation();
});
JSDFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/
As you are having issues of overlapping actions, the usual "fix" is to stop prior animations so they at least do not chain and run to completion:
$(".nav").hover(function (e) {
$(this).children("li").stop(true,true).slideDown();
$(".nav").not(this).find("li").stop(true,true).slideUp();
e.stopPropogation();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/

You can separate your hover() event hook in to two calls, one for mouseenter and another for mouseleave. On mouseenter you want to slideDown() the li in the current ul. In the mouseleave, you want to make them all slideUp(). Try this:
$(".nav").hover(function () {
$(this).children("li").slideDown();
}, function() {
$("li").slideUp();
});
Updated fiddle

According to your code $(this).children("li").slideDown(); makes all li to slide down. And, $("li").slideUp(); will make all li slideup!!
Please do
$(".nav").hover(function (e) {
$(".nav").not(this).find("li").slideUp();
$(this).children("li").slideDown();
e.stopPropogation();
});
refer jQuery not

I added a class to fix this issue
$(document).ready(function(){
$("li").slideUp();
});
$(".nav").hover(function(e){
$("li").removeClass();
$(this).children("li").addClass("current").slideDown();
$("li:not(.current)").slideUp();
e.stopPropogation();
});
Fiddle link

jQuery remove class after second click

I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.

Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements

Show related div when link is clicked

I created a ul containing li elements. I want to to slide down a div when a link in the same li is clicked.
The problem is when I click the link all divs are shown.
I use PHP for setting the id on each link.
The html code is here:
<li class='post'>
<div class='link'>
</div>
<div class='slidedown'>//here is what I want to sliding</div>
</li>
The jQuery code is here :
$(".link a").click(function(){
var id_post = $(this).attr("id");
$(".slidedown").slideDown("slow");
return false;
});

You can do it even more easy:
jQuery
$('.link').on('click', function() {
$(this).parent().find('.slidedown').slideDown('slow');
});
Or you use:
$('.link a').on('click', function() {
$(this).closest('.slidedown').slideDown('slow');
});
Go to .closest() or .parent() at jQuery Docs to learn more.

Here's the code that works well:
$(".link").click(function(){
$(this).siblings('.slidedown').slideDown('slow');
});

You can use parent() to move up a level and next() to target the next sibling:
$(".link a").click(function(){
$(this).parent(".link").next(".slidedown").slideDown("slow");
return false;
});
Or you can access the .post using closest() and target the .slidedown using find() or children():
$(".link a").click(function(){
$(this).closest(".post").find(".slidedown").slideDown("slow");
return false;
});

Use .parent() to move up one parent. Since the container were looking for is the .post we'll have to move up 2 parents. Then we can find the child of it that is .slidedown and slide that one down with .slideDown()
$(".link a").click(function(){
$(this).parent().parent().children('.slidedown').slideDown("slow");
});

How to tell Jquery to run only the last mouseenter event?

I have set of slides and I want to enlarge a photo when a mouse enter on to a slide image.
When I bring the mouse over images all of the images enlarge to the order which I brought the mouse. How I can force jquery to only excete the last mouse enter event and cancel all history mouse enter events?
This is my jquery code.
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
});
});
Please help me to go through this. Thanks!!

You could initially stop all the animations in the mouse enter and animate the image where the mouse is currently in, But keep in mind that you should not stop the animations (all the elements, not the individual) before starting it in the mouseleave, Because it will help the element to revert back to the older state.
WORKING DEMO
Try this out,
$(document).ready(function(){
$("#hoverslider ul li").bind("mouseenter",function(){
$("#hoverslider ul li").stop();
$(this).stop().animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"141px"
});
})
$("#hoverslider ul li").bind("mouseleave",function(){
$(this).stop().animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").stop().animate({
width:"213px"
});
});
});

You can use setTimeout() to trigger enlarge animation. In mouseenter event handler use clearTimeout() to cancel previous animation if it hasn't already started.
This way quick mouse move won't trigger all images to enlarge.

I'm not fully understanding your question, but it seems that you could use the hover method this way
$( "#hoverslider ul li" ).hover(
function(){
$(this).animate({
width:"500px"
},"slow");
$(this).addClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"141px"
});
},
function(){
$(this).animate({
width:"213px"
},"slow");
$(this).removeClass("active");
$("#hoverslider ul li:not(.active)").animate({
width:"213px"
});
}
);
See it online
http://jsfiddle.net/augusto1982/At8XR/
If this is not what you need, please, let me know and I'll fix it.

You can use underscore helper method debounce
http://underscorejs.org/#debounce
This will create a wrapper of your callback, and only call it once every x seconds while you still call it. That means, that you can have many mouse enter and the method is only going to be called once, and only after x seconds that no mouse enter is registered the function is ready to be called again.

You should use jQuery's on method to add events, rather than the older bind method. You can then disable event handlers using the off method.

Create a menu with click and hover functionalty using Jquery

I'm trying to add both click and hover functionality to a menu. My existing Javascript that activates the menu drop down on click 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 tried to use jquery to add simultaneous hover triggering by putting into the head of the page:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>$("#nav").bind("click hover", fn);</script>
amongst other things, and predictably none of them worked. I clearly have no idea what I'm doing! The working page without the jquery additions is here and the menu is down the left hand side of the page. If anyone can spare me advice it would be much appreciated!

Try updating to latest Jquery, and then read about on:
.on( events [, selector] [, data], handler(eventObject) )
events: One or more space-separated event types and optional namespaces,
such as "click" or "keydown.myPlugin".
So basically I think you can exchange .click for .on, and use events click mouseover.
Edit
In your source page the Jquery version is 1.4.2, just for noticing.

You can use a pre-built solution instead of creating your own solution from scratch.
See Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/.
Superfish is a jQuery plugin that handles click/hover dropdown menus.
For a css-only drop-down menu, search "Suckerfish". Superfish can be used on top of suckerfish for graceful degradation in case the user does not have javascript enabled.

I found this worked the best for my needs:
`<script type="text/javascript">
$(function(){
$('#nav > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#nav > li').toggle(function(){
$(this)
.removeClass('waiting')
.find('ul').slideDown();
}, function(){
$(this)
.removeClass('waiting')
.find('ul').slideUp();
});
$('#nav > li').hover(function(){
$(this).addClass('waiting');
setTimeout(function(){
$('#nav .waiting')
.click()
.removeClass('waiting');
},600);
}, function(){
$('#nav .waiting').removeClass('waiting');
});
});
</script>`
#Niloct helped me find a way to close the sub-menu of the previously triggered menu item but it resulted in the menu being a bit impractical. Thanks!