I have some items lets say X, Y, and Z. I use hoverIntent for the hovering event. Let's say when I hover on X I display a tooltip with such kind of code
jQuery('.tooltiper').hoverIntent({
over: showPopup,
timeout: 1000,
out: hidePopup
});
So it will be visible for 1 second. What I want is if I hover on Y or Z hidePopup() to run for X and clear the timeout of hoverIntent, so it won't be visible for 1 second. I tried many things but they don't work.
Anyone has experience about this?
clearTimeout($(".tooltiper").prop("hoverIntent_t"));
$(".tooltiper").prop("hoverIntent_s", 0);
This should work
Add $(this).stop(); in the hidePopup function.
Related
I need to loop horizontal scrolling of wide block. Also I need to controll scrolling with mousewheel and buttons.
I have created working demo on codepen.
Demo on CodePen
Here I use Endless.JS for loop scrolling (works with 2 divs and more) and jquery.mousewheel for mouse wheel support. Also I write some code for arrows. On hover -> block start scrolling with animation.
animate({scrollLeft:'+=40'}
This method works great with mouse wheel but I got some trouble with arrows. After I have scrolled first few divs other div become blinking and works like artifact in game :) (see demo)
Can you help me? Maybe I need to use some other method or lib?
Thanks a lot.
You should probably avoid jQuery.animate here. Not exactly sure what causes the problem, but using timeouts seems to work fine. That way, you also have more control over the delay and animation speed. http://codepen.io/anon/pen/zGbLB
var timeout;
function loop_next(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() + 2);
loop_next();
}, 20);
}
function loop_prev(){
timeout = window.setTimeout(function() {
container.scrollLeft(container.scrollLeft() - 2);
loop_prev();
}, 20);
}
function stop(){
window.clearTimeout(timeout);
}
I'm trying to write a menu that expands the subcategories on hover - so only one subcategory can be expanded at a time. It will looks something like this (completely expanded):
X
Y
Y.1
Y.2
Z
Z.1
Z.2
My issue is this:
The animation works correctly, except if I hover over Y and then try to hover over Z, all of X closes. I know why: there needs to be a delay because Z starts moving up, so you're no longer hovering on Z and it starts closing.
Below is the code:
$( document ).ready(function() {
$("#m2l2").hoverIntent(
function() {
clearTimeout(z_timer);
$("#m2l2").toggleClass("child childopen");
$("#u12").slideToggle("slow", "linear");
},
function() {
z_timer = setTimeout(function() {
$("#u12").slideToggle("slow", "linear", function () {
$("#m2l2").toggleClass("childopen child");
});
}, 10000);
});
});
Is there any way to avoid a delay or to make a delay that only activates in certain case?
Here's the link: http://jsfiddle.net/stamblerre/XYp48/12/
Thank you!!!
Here's how to add timeout for hoverIntent by using the object from hoverIntent jQuery Plugin
$('.selector').hoverIntent({
over: function(){},
out: function(){},
timeout: 1000 // in miliseconds
});
so here's what it will look like : JSFIDDLE, even though sometimes it takes to long before the out function called, so define it with whatever best usage for your case
It is not the js code issue but css issue, you have a vertical menu where 3rd level also opens vertically.
Its tricky but try to visualize
When your mouse enters option Y its 3rd level menu shows ,now when you take mouse on option Z the mouseout event for Y fires and it hides its 3rd level due to which position of option Z shifts and now your mouse pointer is outside the main menu #id="m2l0" and its mouseout event fires and hides both options Y and Z.
In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent
I tried this:
$('#hidden_div').fadeIn();
But the div that I want to smoothly slide down, just teleports itself to its next position. (I want it to slide smoothly to it)
Then this:
$('#sliding_div').animate({marginTop: '+=400px'},1000);
$('#hidden_div').fadeIn();
But I didn't get the right effect.
How can you achieve that? Thanks in advance.
$('#sliding_div').animate({marginTop: '+=400px', opacity:1},1000);
and before, set #sliding_div opacity to 0
If I've understood the effect you're after, you need to fadeIn() the second div after the animate() has completed. You can use the callback parameter of animate() to do this:
$('#sliding_div').animate(
{ marginTop: '+=400px' },
1000,
function() {
$('#hidden_div').fadeIn();
}
);
Here is a smoother version: http://jsfiddle.net/W8AtL/4/
This fixes the jump from it being marginTop.
I saw this code in another question , I thought I might make it work for an image too, but since I am a newbie in jquery, I didn't do much.
Here is the code:
$('someObject').bind('mouseover', function() {
//Do the following while mouseover
$('someOtherObject').css('margin-left',adjustedLeft + 'px');
setTimeout(/*do it again*/,25);
});
I saw it in this question right here:
An "if mouseover" or a "do while mouseover" in JavaScript/jQuery
There is an example below it also, but that one works for text fields.
I want mine to work for images, basically i have 2 images one over another and i want to make a fading effect, so something like
while mouseover , every 0,01sec , lower the opacity by 0.01 ,till 0,01
the moment the mouse leaves the image(button) , stop lowering the opacity and start heightening it again by 0.01 every 0.01sec till 0.99 opacity
Just to be clear again , i got 2 images(buttons) 1 above the other , i want to lower and then heighten the opacity of the upper button.
Also i saw another type of fade , but the 2 buttons were on 1 image , but for me(the newbie) its too advanced i guess, but i might look at that , its a nice way to use less images i guess.
Just in case , here is the link to the example too : http://jsfiddle.net/YjC6y/29/
$('someObject').mouseover(function() {
$('someOtherObject').animate({
opacity: 0
})
}).mouseout(function() {
$('someOtherObject').animate({
opacity: 0.99
})
});
Use jquery hover http://api.jquery.com/hover/someObject
$('someObject').hover(
function () {
// Set the effect you want when mouse is over the element
},
function () {
// Set the effect for mouse leave
}
);
Hope this help :)