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();
});
Related
I wanna imitate the menu item animation of this site
here's the key code I write to make the animation:
li{transition:transform 600ms}
li.animated{transform:translateY(20px)}
/* Javascript */
$('nav ul li').each(function(i){
setTimeout(function(){
$('ul li').addClass('animated');
},400*i)
})
But it doesn't work, in this fiddle, the 4 items are being translated together, not "timeoutted" at all; strangely, in my actual site, the codes seem to be more broken, the class wasn't added at all. I inspected the code of my site and fiddle again, but I couldn't find where the problem is.
You can use the second parameter from the .each method to determine the element. Like:
$('.inOrder').click(function(){
$('ul li').each(function(i, ele){
setTimeout(function(){
$(ele).addClass('animated');
},400*i);
})
})
https://jsfiddle.net/2pgf76vx/2/
You have to use this to target each elements individually,
$('ul li').each(function(i){
setTimeout(function(){
$(this).addClass('animated');
}.bind(this),400*i)
});
DEMO
Or you can use arrow function to fix this,
$('ul li').each(function(i){
setTimeout(()=>{
$(this).addClass('animated');
},400*i)
});
My navigation links are in layout page and they look like:
<h3 id="my-navigation">
ANKETA
STATISTIKA
...
</h3>
I need active link to change color. CSS to achieve this:
#my-navigation a.active {
text-decoration:none;
color:#E0EBEB;
}
Since there are no navigation links in all html pages, but just in layout, I tried with javascript:
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
Why doesn't this work?
EDIT:
I realised that this gives effect just temporary (at the time of click). For example:
$(document).ready(function () {
$('#my-navigation a').click(function () {
$('#my-navigation a').addClass('active');
});
});
blinks all links on click. So, what to do?
The jQuery script you've included works just fine on my end, so I'd say the issue is most likely either with the version of jQuery you've linked on your page or the script being loaded before the links fully render.
Try surrounding the script you listed with a document ready like this:
$(document).ready(function() {
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
});
It is also acceptable to replace the first line with the shorthand version:
$(function() {
This will ensure the page's content is fully loaded before it assigns the on click trigger to the links, as the links must exist prior to that being defined.
Your code should work, at least it works here: https://jsfiddle.net/kvk1keds/
I just changed the click method for
$('#my-navigation a').on('click', function (ev) {});
You should make sure that the method is running and the class 'active' is being set.
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!
I'm trying to apply a cool animation effect on a list with Jquery using a pseudo-recursive function.
It works pretty well for the first item, but after the first loop, the this which was selecting #column-left section becomes the li so of course, the function does not find the next li:hidden because it is already inside. Is there a way for me to come back to my original this once the "this" has changed or maybe do something different ?
$("#column-left section").mouseenter(function fadeItem(){
console.log(this);
$(this).find('ul li:hidden:first').delay(500).fadeIn(fadeItem);
});
Thank you very much for your help.
How about after the .fadeIn() trigger a mouseenter event on the parent section element:
$("#column-left section").mouseenter(function () {
$(this).find('ul li:hidden:first').delay(500).fadeIn(function () {
var $this = $(this);
//check to make sure there are more hidden `<li>` elements
if ($this.siblings('li:hidden').length > 0) {
//trigger a `mouseenter` event on the parent `section` element to continue the queue
$this.parents('section').trigger('mouseenter');
}
});
});
Here is a demo: http://jsfiddle.net/bhTnL/2/
You can use .end():
$(this)
.find('ul li:hidden:first')
.delay(500)
.fadeIn(fadeItem)
.end(); // returns to first selector
But you don't actually need to do this. To select the next hidden li, just do this:
$(this)
.find('ul li:hidden:first')
.delay(500)
.fadeIn(fadeItem)
.closest("li:hidden")
.delay(500)
.fadeIn(fadeItem);
Every function has access to the call method which allows you to pass in your this parameter. I rewrote your original solution using it here:
$("#column-left section").mouseenter(function fadeItem(){
$(this).find('ul li:hidden:first').delay(500).fadeIn.call(this, fadeItem);
});
Ok guys, I found an even better way:
$(this).find('ul li:hidden:first').delay(100).show("fast",function(){
$(this).next(':hidden').show("fast",arguments.callee);
});
Simply use next() (more info) to select the next li then call the function itselt using arguments.callee (more info)
Which gives the full following script below to show the list and hide it:
//show
$("#column-left section").mouseenter(function(){
$(this).find('ul li:hidden:first').delay(100).show("fast",function(){
$(this).next().show("fast",arguments.callee);
});
});
//hide
$("#column-left section").mouseleave(function(){
$(this).find('ul li:visible:last').delay(100).hide("fast",function(){
$(this).prev().hide("fast",arguments.callee);
});
});
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')
});
});
});