TweenMax hover animation issue - javascript

I have a nagivation bar with li in my backbone application. I am creating a hover effect for the links. The effect is just a background image sliding to the hovered link and then going back to the original position.
For the animation, I am using TweenMax library. The way this works is:
First I initialize TimelineMax with a paused property like this:
this.animation = new TimelineMax({ paused: true });
then I work with these methods:
prepareToAnimate: function(to) {
this.animation.to(this.el, .5, { left: to });
return this;
},
animate: function() {
this.animation.play();
},
reverse: function() {
this.animation.reverse();
}
So basically, from outside my view I wanted to call movingElementView.prepareToAnimate(200).animate() on mouseenter and movingElementView.reverse() on mouseleave.
It is animating, but the animation is going crazy. It goes forward, then it goes backward, then jumps forward again. I checked the console and it seems to add up the duration and probably left property as well. Do I have to new up TimelineMax on every mouse event instead?

Related

How to set the Swiper.js speed (transition duration) to zero on mouse Enter?

I made a slider with Swiper.js which automatically scrolls in a loop.
My code: https://codepen.io/BehnamAzg/pen/NWzmBKo
I wanted it to stop scrolling when it's being hovered, so I add this code:
autoplay: {
disableOnInteraction: false,
pauseOnMouseEnter: true
}
This is working fine, but the speed of scrolling is too high
so to adjust that I have to add a speed (transition duration) to it. but by adding this it makes the mouseEnter a delay to make an effect.
For example:
If I set the "speed" to 5000ms, it would take 5 seconds till the slider stops scrolling when it's hovered.
I don't want this "speed attribute" effects my hovering, I want it to immediately stop the scrolling.
For solving this, I tried to add a delay instead of speed but it will remove the smoothness of scrolling.
I tried to set the transition duration to zero while being hovered with CSS, but that also didn't work:
.swiper:hover > .swiper-wrapper {
transition-duration: 0 !important;
}
I also tried to add a swiper.setProgress(progress, speed) to it and set the speed to zero, it did work but it will mess up the progress of the slider:
$(".swiper").each(function(elem, target){
var test = target.swiper;
$(this).hover(function() {
test.setProgress(0, 0);
}, function() {
test.setProgress(0, 5000);
});
});
I don't know what to do anymore, any suggestions?!

hoverIntent menu: Entry and exit intents, but with no animation between menu items

Right, so I have a main menu on my site, and I'm using the Hover Intent plugin to show sub-menus. When hovering the menu will fade in with easing, and of course will fade out with easing when the mouse moves away.
Now, what I'm trying to do seems quite simple, but I just don't know how to implement it. I need to be able to only animate the first menu that I navigate to, but when I hover between them, there should be no animation.
For example, let's say I have the following menu structure:
Home
About
Company
Mission & Vision
Solutions
About our solutions
Money-back guarantee
Contact Us
"About" and "Solutions" both have sub-menus. If I hover my mouse over "About", I want its sub-menu to fade in. If I move mouse directly from "About" to "Solutions", I want the visible sub-menu to simply disappear (no fading), and the "Solutions" sub-menu to simply appear (no fading). Then, when the mouse leaves "Solutions", that menu should fade out.
It might sound silly at first, but I have a reason for this process. See, I have a page-wide block element behind the sub-menus that also animates with the menus themselves. Its purpose is to make the menus stand out better. Now, I don't want that fading out every time I switch between menus.
Is this possible?
Here's my current [basic] code right now:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent(function() {
$(this).find('div, ul')[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade')[over]({duration: 450, easing:'easeInOutQuad'});
}, function () {
$(this).find('div, ul')[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade')[out]({duration: 450, easing:'easeInOutQuint'});
});
}
}
MainMenu.setup('div.menuPlaceHolder > ul > li:has(div,ul)', 'fadeIn', 'fadeOut');
Found it:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent({
over: function() {
$(this).find('div, ul').stop()[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade').stop()[over]({duration: 450, easing:'easeInOutQuad'});
},
out: function () {
$(this).find('div, ul').stop()[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade').stop()[out]({duration: 450, easing:'easeInOutQuint'});
},
interval: 0
});
}
}
I just set the interval method to 0 and added stop() to each action. So, the menus will always animate (which is okay, I guess), but the backFade will not.

How to stop jcarousel animation?

I'm using jcarousel to animate an unordered list but since I need the animation to smoothly transition between items I'm setting the animation option to a very large integer, this works fine but I need to start the slide animation when I mouse over some links and stop it on mouse out, this is what I have so far:
$(function() {
function customCallback(carousel) {
$('.prev').hover(function() {
// Starts the back animation
carousel.prev();
}, function() {
// How to stop animation?
});
$('.next').hover(function() {
// Starts the forward animation
carousel.next();
}, function() {
// How to stop animation?
});
}
$('.list').jcarousel({
animation : 14000,
wrap : 'circular',
easing : 'linear',
buttons : false,
initCallback : customCallback
});
});​
But I don't know how to stop the animation on mouse out, here's a demo to illustrate this better: http://jsfiddle.net/hfuwM/1/
Can anyone point me in the right direction? Thanks in advance
EDIT: I found that using carousel.list.stop() on the mouseout callback stops the animation but then it doesn't restart when hovering the links again.

How do I stop a bouncy JQuery animation?

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

jQuery's stop() seems to be blocking animations that haven't been queued yet

How does jQuery's stop() actually work?
If you look here (http://jsfiddle.net/hWTT6/), when you hover over the main blue box it should fade to red, and when you hover off it should fade back. The problem is it will completely fade to red (and then back to blue) even if the mouse has hovered off before the first fade was complete. The problem can more clearly be seen with the slide effect. Hover over the slide "button" and the main box will slide to blue, hover off, it will slide back. But try hovering on and off and on and off, before the first animation has completed. You'll see that all four animations are carried out. I included both examples here to show it is not just a problem with one effect or something.
I thought this would be easily fixed by adding a stop before the animations, as shown commented out in the code. But, if I do this the current animation will stop and the following one will never start. Almost as though stop is blocking an animation that is occurring after the call to stop.
What am I missing here?
Thanks.
You are missing that .stop() accepts two arguments. Both boolean, indicating:
- clearQueue (first)
- jumpToEnd (second)
So by calling $('#foo').stop( true, true ).doSomeOtherStuff() you should get your desired goal.
Reference: .stop()
The problem is the CSS is getting messed up by stopping at arbitrary points.
The fadeIn(), fadeOut(), slideUp() and slideDown() move from the current state to a new one and then revert to that - not to the original CSS.
You need to fix the CSS back in to a usable state to continue with after the .stop(), or more clearly specify the animation targets.
As the others have said, you can get the CSS to the correct position, by ensuring that when you stop the animation, it jumps to the end of it, rather than leaving everything in an arbitrary state.
UPDATE:
Take a look at the code in this update of your demonstration: http://jsfiddle.net/hWTT6/5/
It might not be exactly how you want it to perform, but the trick, if you do not want the animation to run its course, is to get the animation back in to a state that it can continue from in the way in which you desire.
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
$('#fg_fade').css('height', '100%');
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
})
.mouseleave(function() {
$('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
$('#fg_fade').css('opacity', 1);
});
});
});
You could set the stop() options to (true, true) so that you cancel all events in cue and jump to the end of the previous animation. look at the fiddle:http://jsfiddle.net/hWTT6/4/
The stop method can be called in the following difference ways:
.stop(true);
//Same as:
.stop(true, false); //Empty the animation queue only
//Or
.stop(true,true); // Empties the animation queue AND jumps to the end
//Default
.stop()
//Same as
.stop(false,false);
There may be a better way using .animate instead: Demo Here
$(function() {
$('#fade')
.mouseenter(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow');
});
$('#slide_fire')
.mouseenter(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');
})
.mouseleave(function() {
$('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow');
});
});
This way the animation stops when you want it to and still runs the next animation.
The problem with doing .stop then slideUp/slideDown or fadeIn/fadeOut is that the animation can end prematurely and keep an incorrect height/opacity.
The problem is caused by the way fadeIn, fadeOut etc. work. You may expect them to fade between 0 and 1. However, in reality they fade between 0 and whatever the "baseline" opacity is. You can see this here:
http://jsfiddle.net/hWTT6/7/
You'll notice I set the initial opacity to .5. Now when I call fadeIn it does not fade all the way in to 1 it fades to my baseline of .5. Your problem occurs when you stop the animation prematurely, the "baseline" becomes whatever the opacity is at the time it is stopped. Now when you call fadeIn on mouseleave it tries to fade to this new baseline and finds it is already there. You can see this illustrated by going here:
http://jsfiddle.net/hWTT6/8/ (original, but with .stop)
If you place your mouse over slide and then remove it half-way through the animation, it will stop in the middle. Now place your mouse back over slide and wait for the animation to complete. If you now remove your mouse, you will see that it slides back down to the place where the first animation was stopped. That is because this is the new "baseline".
The way that you would solve this is actually to replace fadeIn, fadeOut, etc. with a more explicit animation. For instance, use fadeTo to tell it to fade between 0 and 1:
http://jsfiddle.net/hWTT6/6/
Notice that since I am telling it to fade to 0 or 1 everything works. A similar thing could be done to replace slideUp and slideDown using animate.

Categories

Resources