I'm trying to have the following:
There is a fixed positioned div on the bottom of my page. When the mouse enters and exits the div animates its height to resp. 100px and 50px. The default height is 50px.
I've found that Jquery does this correctly with only one big no-no. When the mouse exits while animating and then reenters again it either:
a) stacks the animations leading to a lot (say 100) animations being done, while only one was necessary.
b) resets current animations, which leads to unexpected behavior like the div disappearing, changing to a fixed height which locks down or glitching up and down between 100 and 50 pixels.
Any ideas on this?
When you handle your mouseover and mouseout events, you should use the stop() function to clear the animation queue. It will let you jump to the end of the animation (before you start another one) if needed. You can also clear the whole queue of animations.
From the jQuery API documentation :
The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:
<div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>
We can create a nice fade effect without the common problem of multiple
queued animations by adding
.stop(true, true) to the chain:
$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});
Rather than firing off an animation event on every action, how about having a function that constantly polls specific variables, and acts accordingly - by moving or not moving a certain (variable) amount. Your mouseover and mouseout events would then modify those variables that are polled, and so you wouldn't have to worry about triggering hundreds of animations. Let me know if I'm not making sense so I can clarify..
The only solution I've found so far to work is to give both the mouseenter and mouseexit animation a ClearQueue() before animating, but I think this might be unwanted in some cases.
In the case of using animate() this works quite nicely, but with slideUp and other default JQuery animations it leads to improper behavior.
Related
I'm using pagePiling.js to create a one page scroll effect. Within one of the pagepiling sections, I have a child div that is scrollable. When the user gets to the section with the scrollable div inside it, I'd like them to be able to scroll to the top of each paragraph within the scrollable div every time they scroll downwards via the mousewheel.
The issue here is that the mousewheel/wheel event fires 2 times, 4 times, 12 times, or even 21 times when I move my mousewheel one "tick" (for lack of a better term), but I'd only like it to fire once. Otherwise my functions are firing too often and exhibiting a poor scrolling experience. The number of wheel events starts to jump when I either scroll inside the scrollable container specifically or when I jump back and forth between sections and try to scroll the scrollable container again.
So far I've tried implementing lodash.js and the debounce/throttle methods using addEventListener() in the past but I still receive multiple mouse events after a single wheel tick, similar to what I've described above.
I've created a codepen here to show what I've got so far. My issue begins within the mouseover function, here's what I've been working with so far:
$('.overflow-section').on('wheel', function(e) {
var oEvent = e.originalEvent,
delta = oEvent.deltaY || oEvent.wheelDelta;
if (delta > 0) {
$('#scrollable-container').animate({
scrollTop: $("#section-two").offset().top
});
} else {
$('#scrollable-container').animate({
scrollTop: $("#section-one")
});
}
});
Once I scroll to the bottom section, the console outputs 6 wheel events when I tick the wheel once but it should only fire once.
You can take a look at Letarghy library.
It is an attempt to solve problems with "kinetic scrolling" which is your case.
Note it won't be perfect tho, as there's literally no way to detect a single swipe/scroll in some devices. In that case a delay would be applied.
So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?
Any help would be great,
Thanks!
You can use
beginElement() function to starts animations manually.
for this to work, you have to set the begin attribute of animate element to indefinite
a simple example would be something like
window.onscroll = function(){
var anime= document.getElementsByTagName('animate')[0];
// check for the amount of scroll
anime.beginElement();
}
You could also make use of beginElementAt()
read more about svg Animation Timing Control
side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'
I built a slideshow-menu (using Slide JS - http://www.slidesjs.com/ ) and added a hover-event, so images will already switch when moving the mouse over the menu point. Additionally, when moving out of the whole block, there's a mouseleave event, which sets the image and menu point back to the first one.
Now when I quickly switch between menu points (hover event) and then leave the whole block (mouseleave), it usually skips the mouseleave event (- or it never reaches it because the hover events (including a fade effect) take up too long).
Is there a way to thoroughly work off each event (or at least the last one in a row - e.g. mouseleave or last hover)?
Maybe an image of the website layout helps?
Red: Hover-Event (changes green content)
Blue: Mouseleave-Event (green goes back to default)
If the fade effect is the culprit, then try adding a stop(true, true) function before your fade effect.
$(slideshow-menu-selector).on('mouseleave', function(){
// Reset code here
$(element-selector).stop(true, true).fadeOut();
})
This is just a sample code, based on your question. If you can put up a Fiddle, it would help a lot!
I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.
Live Demo with visible code; http://jsfiddle.net/3eEgb/4/
The demo should be fairly self explanatory; I'm finding the length of a sentence inside a wrapper with the overflow hidden, and if it's wider than the wrapper I'm running an animation function that slides it along, revealing the remaining text.
However I'm having problems with the mouseout part of the hover() function. When the user mouses out I'd like the text to snap back to it's starting position.
According to the documentation (http://api.jquery.com/stop/) I should be able to .stop() the animation on the object - but I must be missing some detail because I can't get it to work as documented. If I could get .stop() to function I presume I can chain it with .css() to set margin:0 to move the text back to it's original position.
$(this).stop().css("color", "red"); //This isn't working ARR!
is the source of my frustrations. I've tried all the various ways I could think of to no avail.
Thanks!
You're animating the .width element, but stopping the .track-version element.
Change the mouseleave handler to $(e).find(".width").stop().