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.
Related
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
I made a toggle button with pure CSS/jQuery and all works perfectly. The problem comes when I duplicated it and tried to toggle it. As supposed, the toggles 'toggled' at the same time, here is my code so far:
HTML
<div id="container">
<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>
jQuery
$(function(){
$('.space').click(function(){
if($('.circle').hasClass("detector")){
$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
} else {
$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
}
});
$('.space').eq(1).click(function(){
if($('.circle').eq(1).hasClass("detector-1")){
$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
} else {
$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
}
});
});
Or the Jsfiddle:
http://jsfiddle.net/ew0s6nqd/
This is how it works, when you click the toggle it detects if it has a class called "detector". If it doesn't, it animates the toggle and creates one. If it does, that means that the class was previously created so it animates back the toggle and removes the class.
Ok, the problem starts when I duplicate the toggle. I have now two of them which I want to activate individually. The easiest solution was using :eq() jQuery selector or .eq() jQuery function which people classified as a more 'correct' option.
So I add it to the code of the second toggle but it didn't worked. In the fiddle above you can test it by yourself. Please if someone know which is the problems, let me know, thanks!
EDIT: I already used :eq() selector but it didn't work either.
EDIT 2: I use a different detector class called "detector-1" to prevent it from interfering with the other one.
$(function () {
//the click function for every element with the .space class
$('.space').click(function () {
//check on the .circle child of the clicked .space using "this"
if ($('.circle', this).hasClass("detector")) {
//and animate it
$('.circle', this).animate({
marginLeft: "2px"
}, "slow", function () {
// since we are in the animate callback, "this" is now the
// .circle of the clicked .space
// we want the lights to change - so we have to travel the dom upwards
// 1st .parent() brings us to .space
// 2nd .parent() leads us to .switch
// siblings() let us find the .light-1 element
$(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
// same here for light-2
$(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
$(this).removeClass("detector");
});
} else {
$('.circle', this).animate({
marginLeft: "47px"
}, "slow", function () {
$(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
$(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
$(this).addClass("detector");
});
}
});
});
using the this selector, you need to define the click handler only once - and it still works for endless numbers of buttons...
"see working fiddle"
forgot to mention. i changed the css in your fiddle, since the background image didn't show up, i created a white circle via css...
I figured out how to make it thanks to #BhushanKawadkwar
I had to use the :eq() selector on the click function and .eq() function in the other ones. I don't know why, but it works, here's the working fiddle:
http://jsfiddle.net/ew0s6nqd/2/
http://jsfiddle.net/borayeris/sb9Ju/4/
Here is my script. How can I stop fading out if mouse is back on menu?
Try adding a call to stop() on the fadeIn:
$(function(){
var piFade;
$('#menu > li').hover(
function(){
$('#menu > li:hover > div').stop(true,true).fadeIn('slow');
},
function(){
$('#menu > li > div').fadeOut('slow');
}
);
});
http://jsfiddle.net/sb9Ju/13/
And here is a version with the delay included. I'm not a huge fan but it's not too bad with the call to stop in there.
http://jsfiddle.net/sb9Ju/15/
You set too long a delay. It still runs the original hover function.
You remove it, it waits 2.5 second, then you back on it and it still removes menu from the first time you've hovered.
I really don't see a reason to use delay there.
I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/
Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/
Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked
You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/
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')
});
});
});