jQuery animation code only running first instruction? - javascript

I'm fairly certain I'm being massively stupid here, but how can I run multiple jQuery animation instructions one after the other. The code below causes my box to move away from the left hand side correctly, but does not cause it to expand down.
click : function(){
$(this).not(".break").animate({left: '100%'}, 300);
$(this).slideDown(300);
},

You can split them into two:
$(this).not(".break").animate({left: '100%'}, 300);
$(this).children().slideDown(300).hide();

Related

Animation not being made jquery (backgroundColor)

I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation

Velocity.js - Buggy looping animation?

I have been testing a theory design for an animated mouse to indicate that the user of a website can scroll downwards. It's not complicated, and I've come up with a design which should be re-usable...
However for some reason if I try to clone the element and append it, it no longer get animated visually? However if I $.click() with jQuery, it fixes after one iteration.
Perhaps this is just a browser render issue? Please let me know if you cannot replicate the problem! Cheers
jsfiddle: https://jsfiddle.net/xw39e0bs/4/
Turns out that velocity calculates the start point based on current CSS values. So if you clone a moving element mid-motion, that will become the new start point. Therefore, one way to fix this is to provide forcefeeding.
Working example:
function mouse(){
$(".mouse .ball").velocity({
top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
duration: 800,
easing: "swing",
}).velocity("reverse",{
delay: 2000,
complete: function(){
mouse();
}
});
}
mouse();
$("#clone").click(function(){
$(".mouse").last().clone().appendTo("#mice");
});
https://jsfiddle.net/xw39e0bs/5/
In this version we're reassigning the selector to bring in the cloned items. All of the clones then animate as expected.
complete: function(){
sel = $(".mouse .ball");
mouse();
}

Interval doesn't clear immediately after repeating for a while

I have a bouncing arrow on my website that I created with Jquery and setInterval, like this:
bouncing = setInterval(function() {
$("div").animate({
top:"30px"
},100,"easeInCubic",function() {
$("div").animate({
top:"0px"
},100,"easeOutCubic");
});
console.log("bounced");
},200);
You can see this in place in a codepen here: http://codepen.io/mcheah/pen/wMmowr
I made it run faster than i needed because its easier to see the issues quicker. My issue is that after leaving the interval running for a few seconds, you'll notice that instead of bouncing back up or down immediately, the bouncing element will stop for half a second and then just hang there, before beginning again. If you leave it running even longer (20 seconds) and then clear the interval, you'll notice that it takes a few seconds to stop bouncing.
My questions are these:
Why does the bouncing go out of sync occasionally?
Why does the clear interval take a while to clear if it's been repeating for a while?
Is there a better way to have a bouncing arrow? Are CSS transitions more reliable?
Thanks for your help!
Your are trying to perfectly coordinate a setInterval() timer and two jQuery animations such that the two come out perfectly coordinated. This is asking for trouble and the two may drift apart over time so it is considered a poor design pattern.
If, instead, you just use the completion of the second animation to restart the first and make your repeat like that, then you have perfect coordination every time.
You can see that here in another version of your codepen: http://codepen.io/anon/pen/NxYeyd
function run() {
var self = $("div");
if (self.data("stop")) return;
self.animate({top:"30px"},100, "easeInCubic")
.animate({top:"0px"}, 100, "easeOutCubic", run);
}
run();
$("div").click(function() {
// toggle animation
var self = $(this);
// invert setting to start/stop
self.data("stop", !self.data("stop"));
run();
console.log("toggled bouncing");
});
It's not a good idea to mix animate() with timers this way. There's NO chance you can synchronize something like this. And there's no need to. You can simply append a function into the animation queue, look here: https://stackoverflow.com/a/11764283/3227403
What animate() does is put an animation request into a job queue which will be processed later, when the right time comes. When you break the interval the stuff that accumulated in the queue will still be processed. There's a method to clear the queue and stop all animation immediately.
The JQuery animation functions actually manipulate CSS, and there is nothing beyond it in HTML. Another option would be using a canvas, but it is a completely different approach and I wouldn't recommend it. With JQuery's animation your already at the best choice.
This is a simple solution to your problem:
function bounce()
{
$("div")
.animate({
top: "30px"
}, 100, "easeInCubic")
.animate({
top: "0px"
}, 100, "easeOutCubic", bounce); // this loops the animation
}
Start bouncing on page load with:
$(bounce);
Stop bouncing on click with:
$("div").click(function() {
$("div").stop().clearQueue().css({ top: "0px" });
// you want to reset the style because it can stop midway
});
EDIT: there were some inaccuracies I corrected now. The running example is on codepen now.
If you want to use javascript for animation you can use something better like the greensock tween library
http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/
something like this:
var tween = TweenMax.to($("div"), 100, {y: "100px", yoyo: true, repeat: -1});
You could wrap your interval code with:
if(!$("div").is(":animated"))
This will initiate your animation only if your previous one is finished.
The reason why it was bouncing weird is that your animations are queued.
You can check how it works now:
http://codepen.io/luminaxster/pen/XKzLBg
I would recommend using the complete callback when the second animation ends instead and have variable to control a bounce recursive call in this version:
http://codepen.io/luminaxster/pen/qNVzLY

jQuery hover animation queue

Having some trouble fully understanding how animations in jQuery are queued and initialized. Trying to get more comfortable with the concept by writing some button effects.
I want to turn the code from the pen below into a smooth animation (as you can see if you hover over the button multiple times you run into some issues) that executes each animation on hover in ONLY when there is not another animation going on, and then execute hover out animations ONLY when the hover in animation finishes.
Here is my code: http://jsbin.com/larukayi/1/edit
Thanks in advance for any help!
I think below changes give you the expected result:
button1.css("cursor", "pointer").hover(
function(){
slideup.stop(true).animate({
"bottom":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"left":"50px"
},150,'linear');
slideright.delay(550).animate({
"left":"0px"
}, 100, 'swing');
},
function(){
slideright.stop(true).animate({
"left":"-50px"
},150,'linear');
slideup.delay(100).animate({
"left":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"bottom":"-100px"
},150,'linear');
});

Duration of jQuery events not equal

I have two lines of code firing on the click of a div. They do what I want them to, but it seems that the timing of them is out of sync. These are the two lines.
$('#tourPage').show("slide", { direction: "right" }, 500);
$('#navigationRight').animate({marginLeft: '-1240px'}, 500);
I have the duration of both of them set to 500, but they don't move together. There seems to be some sort of separation or something between them. I haven't had this trouble before. I used this and it works just fine.
$('#aboutPage').animate({width: 'hide'}, 500);
$("#navigationLeft").animate({marginLeft: '0px'}, 500);
Those two elements do move together when clicked.
Any ideas why time is different in the first case?
Thanks

Categories