JS delays two animations in one click event - javascript

I am creating an off canvas navigation with CSS and JS. Everything works fine except that there's a delay in the following click event:
$('.open-nav').click(function(){
$('#trigg, #container').animate({left: "200"}, 300);
});
By clicking the .open-nav button, both the #trigg and #container div should move 200 pixels to the right within 300 milliseconds, starting at the same time. But the #trigg div starts the animation before the #container does.
What can I do?
I already tried "queue: false" but it's still delayed.
Thanks.

EDIT:
Tried using CSS3 animations instead?
$('.open-nav').click(function(){
$("#trigg, #container").addClass('open');
});
JSFiddle

Related

Loop horizontal scrolling of two divs with mousewheel and buttons

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);
}

Why is my jQuery transition is glitchy?

I have a jQuery transition with a css overlay that will work fine if the user mouses over for a second or more....however if the user mouses over quickly then the overlay text stays put without the overlay background. Here is my jQuery code:
$(".cascade-t1").hover(function(){
$(".cascade-corner").fadeOut();
$(".overlay-t1").animate({"left": "-300px"}, 300, function(){
$(".cascade-overlay-content").fadeIn(200);
});
}, function(){
$(".cascade-corner").fadeIn();
$(".cascade-overlay-content").fadeOut(200, function(){
$(".overlay-t1").animate({"left": "130px"}, 300);
});
});
Here is the script in action
It looks like the issue is that you don't fadeIn() the .overlay-t1 text until the mouseenter animation is done, and on mouseleave you fadeOut() the text out right away before the animation. When you move your mouse in and out faster than initial the animation the code will fade out the text and then fade it in again (the issue you're seeing).
One possible solution is to slightly alter your bottom (mouseleave) function to resemble your top (mouseenter) function more closely. Something like:
$(".cascade-corner").fadeIn();
$(".overlay-t1").stop(true, true).animate({"left": "130px"}, 300, function () {
$(".cascade-overlay-content").fadeOut(200);
});
The .stop() is there to keep the animation from playing over and over when someone spams the box.
FIDDLE DEMO
Not sure how jquery animate works under the hood but it's possible it's using javascript to animate instead of css transitions. The benefit of css transitions is that it does all of the animation calculations before the animation begins and is hardware accelerated. Javascript is at the mercy of the scheduler at a very high level so it will always be choppy.
Try jquery transit.
http://ricostacruz.com/jquery.transit/

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

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 - fadeIn/fadeOut flicker on rollover

I am using the following code to acheive a fadeIn/fadeOut effect on rollover/rollout of it's parent div.
$('.rollover-section').hover(function(){
$('.target', this).stop().fadeIn(250)
}, function() {
$('.target', this).stop().fadeOut(250)
})
It works correctly when I rollover the div and out slowly. However if I move my mouse over and then off the div quickly, it breaks the effect. The target div seems to get stuck at an opacity between 0 and 1.
What confuses me is that when I use the following code it works perfectly.
$('.rollover-section').hover(function(){
$('.target', this).stop().animate({
opacity: 1
}, 250);
}, function() {
$('.target', this).stop().animate({
opacity:0
}, 250);
})
So, I have two questions.
1 - why is my first code block behaving as it does?
2 - What is the difference between fadeIn()/fadeOut() and animating the opacity?
As it was stated already it's because those modify the css and change the display to none. By using fadeTo you can get the same effect, but it doesn't modify the css, so it should work correctly.
update example: http://jsfiddle.net/TFhzE/1/
you can also do
$('.rollover-section').hover(function() {
$('.target', this).stop().fadeTo(0,250);
}, function() {
$('.target', this).stop().fadeTo(250,0,function(){$(this).hide();});
});
to completely hide it yourself once it actually is complete.
I've put my answer from the comments here:
Just use the animate example you have there. Check here for an answer to why the fade animation behaves the way it does:
jQuery fade flickers

Categories

Resources