We Keep Coding

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

Greensock (GSAP) is much less smooth/more jerky compared to css animations in this simple example. Is there a way to improve it?

I'm new to gsap so if I'm doing something horribly wrong then please correct me, but this is a pretty simple example. I'm just trying to compare performance of css animations to gsap animations in Firefox and Chrome, to decide which to use for an animation I may be working on in the future.
Based on examples that I've seen on various sites it looked like gsap was supposed to perform better in general and be less wonky with more options, but for this simple example that's not what I'm seeing at all, and I would think something like this would be something quite common to both use cases of css and gsap animations.
I know about the Firefox issue referenced here, where you need to apply a rotation to animations or sub pixel rendering is not used, so I've applied the rotation in both the css animations as well as the gsap animations to try and fix the jerkiness in Firefox. That did help, but still when you compare the two animations in either Firefox or Chrome, the gsap example visibly lags. The two animations are not exactly moving at the same easing, but I think it's close enough that they can be compared properly.
Firefox gsap performance is still much worse than in Chrome, but Chrome gsap does still lag every few repeats or so, while in Chrome the css animations do not. It looks to me like Firefox css animation is about as good as Chrome gsap performance.
Here is the codepen so you can see for yourself, note that to see it properly you should open the link and expand your window, and it'll work best on a resolution of at least 1920x1080:
http://codepen.io/apodworny/pen/dpkEQg
So am I doing something wrong? Are there more tricks to increase performance such as the Firefox rotation trick? Is this just something specific that greensock has problems doing? Any help or insight would be appreciated.
Thanks!
Relevant HTML, CSS, and JS:
HTML:
<div id="site-wrapper">
<div class="css-animations">
<div class="square">css</div>
<div class="circle">css</div>
</div>
<div class="gsap-animations">
<div class="gsap-square">gsap</div>
<div class="gsap-circle">gsap</div>
</div>
</div>
CSS:
#keyframes pulse {
0%, 100% {
transform: translate(100px, 0) rotate(0.01deg);
}
50% {
transform: translate(1500px) rotate(0.01deg);
}
}
#keyframes circle-pulse {
0%, 100% {
transform: translate(100px, 0) rotate(0.01deg);
}
50% {
transform: translate(1500px) rotate(0.01deg);
}
}
JS:
$( document ).ready(function() {
var tl = new TimelineMax({
repeat: -1
});
var tl2 = new TimelineMax({
repeat: -1
});
var $square = $('.gsap-square');
var $circle = $('.gsap-circle');
tl.to($square, 1.5, {
x: 1400,
ease: Power1.easeOut,
rotation:0.01
})
.to($square, 1.5, {
x: 0,
ease: Power1.easeOut,
rotation:0.01
});
tl2.to($circle, 1.5, {
x: 1400,
ease: Power1.easeOut,
rotation:0.01
})
.to($circle, 1.5, {
x: 0,
ease: Power1.easeOut,
rotation:0.01
});
});

This is a more of an apples-to-apples comparison (kinda): http://codepen.io/anon/pen/BLJGwK?editors=0110
On my system, I couldn't notice any difference in terms of smoothness, but I realize results may vary by system, graphics card, etc.
And your GSAP code could be quite a bit more concise (here's the meat:)
var tl = new TimelineMax({repeat: -1});
tl.to('.gsap-square, .gsap-circle', 1.5, {
x: 1500,
ease: "quad"
}).to('.gsap-square, .gsap-circle', 1.5, {
x:100,
ease:"quad"
});
Please keep in mind:
You're comparing the best possible scenario for CSS, and worst possible scenario for JS because if you only animate transforms (or opacity), most modern browsers delegate that to a different thread. There are other consequences to that, however. See http://greensock.com/css-performance for a video explanation. In many other cases, GSAP was actually faster than CSS.
If you add even one other property to your animation (doesn't matter what, just something besides transforms or opacity), you lose that separate thread boost in Firefox (the entire thing, including transforms, goes back to the main thread...at least that's my understanding and it has to do with the synchronization issue mentioned in the article above).
GSAP does automatically GPU-accelerate things for you via JS.
You might want to try adding will-change:transform to the elements you're animating.
The real benefit of GSAP over CSS (and other libraries), according to most people I talk to, has to do with:
Workflow. Changes and experimentation are much easier for even moderately complex animations. Total control of every aspect. Way more easing options. Hook up scrubbers, seek(), reverse(), timeScale(), etc.
Compatibility. GSAP works around a ton of browser bugs and inconsistencies that'll bite you if you try animating with CSS.
Capabilities. GSAP can do far, far more than CSS. Won't bore you with a list here, but it's extensive. Partial list is at http://greensock.com/why-gsap/
And yeah, GSAP is hyper optimized for performance. It's pretty widely seen as the gold standard in that regard. I'm not aware of anything faster, though CSS animations of transforms do have an advantage in this one scenario. But frankly I doubt it'd even be noticeable in most real-world scenarios. I always encourage folks to do their own tests.
Sorry if that sounded like a sales pitch. Didn't mean it that way - I just wanted to set the context properly. Sometimes I see people get hyper-focused on one particular scenario or use case and they miss some very important factors that might be worth considering.

Successive background-color animation request failing with jQuery 1.6.1

I'm trying to "flash" an input box by changing the background color briefly and then reverting back to the original bg color using jquery to indicate an error and grab the users attention.
Here's a fiddle to demonstrate what I'm trying to do.
I have to use jquery version 1.6.1. In the fiddle demo, it's using 1.6.4 and the color of the input box never changes at all. Actually, it doesn't work even with 1.11. In my local tests with my code, the input box changes red with the first animation call, but fails to do anything for the second animation call (to revert the bg color back to white). It just stays red.
I'm using very similar code to do the same thing in another site, except using jquery 1.11 and it works fine.
Is this just a compatibility issue? Is there some way I can make this work properly with version 1.6.1 ?
Here's the code:
function flashInputBox(id) {
var input = $('#'+id);
input.focus();
input.stop(true).animate({'background-color': '#EC8686'}, 350, function() {
input.stop(true).animate({'background-color': '#FFFFFF'}, 1000);
});
}
I forgot to mention that I'm using jQuery UI v1.8.18
The problem is properly replicated now in this fiddle (same code, just added jQuery UI 1.8.18).

Do you need to use jQuery? If not, this is way easier in CSS using key frames. If it is, skip my CSS explanation.
CSS
This still uses jQuery, but it gives the animation job to CSS, making your code more legible. I set this up in jsFiddle if you want to check it out: jsFiddle Example
First, setup a keyframe:
#keyframes pulse{
from {
background: #ec8686;
}
to {
background: #ffffff;
}
}
#-webkit-keyframes pulse{
from {
background: #ffffff;
}
to {
background: #ec8686;
}
}
and attach it to your existing input:
#my-input{
...
-webkit-animation: pulse 5s infinite;
-webkit-animation-play-state: paused;
...
}
Then the jQuery becomes a matter of letting the animation play for a few seconds:
function doIt() {
$("#my-input").css("-webkit-animation-play-state", "running");
setTimeout(function() {
$("#my-input").css("-webkit-animation-play-state", "paused");
}, 5000);
}
Also, you don't even need the jQuery to trigger the animation. The button click can directly trigger a CSS animation, however I figured you have some sort of code to check what's in the box for accuracy, so that why I kept your old function.
Note that this keyframe ends suddenly, so you can totally have a 0%, 50%, 100% keyframe instead.
Now for the raw jQuery way:
jQuery
For your jQuery, its much easier just to either specify your input directly (aka $("#my-input-name")), or if its just one input, I got it working just by using the following code instead:
function doIt() {
...
input.stop().animate({'background-color': '#EC8686'}, 350, function() {
// just say input here //
input.animate({'background-color': '#FFFFFF'}, 1000);
});
}

Colors aren't numeric values, so they can't be animated. From the jQuery documentation for .animate, emphasis mine:
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
If you don't want to (or can't) use the jQuery.Color plugin, you'll need to animate the color "manually", e.g. by setting an interval and changing the color at each step.

Coverflow like effect with jQuery

My goal is to make an effect similar to apple coverflow for divs using jQuery. There's a really great clone called CoffeeFlow but it's slightly different than what I'm looking for.
What I'm looking for is more like looking at a closet full of clothes. All of the divs are turned almost 90deg so you can barely see them. As you mouse over they rotate and straighten out so you can see them, and as you unhover, they glide back into place.
I'm using the jQuery plugin transit to help achieve this. I have a jsFiddle that almost achieves what I want, but something seems off. It appears to stretch in and out rather than rotate. There may be other things wrong as well but this is what is most apparent to me right now.
The jsFiddle
$(document).ready(function () {
$('.boxxe').hover(
function () {
$(this).stop();
$(this).transition({
rotateY: '0deg',
zIndex: '2',
background: '#afa',
scale: 1.1
}, 400);
},
function () {
$(this).stop();
$(this).transition({
rotateY: '60deg',
zIndex: '-1',
background: '#FFF',
scale: 1
}, 400);
});
});
EDIT: It looks like one of my biggest problems is my perspective in my css doesn't work. It works if I apply perspective to my transition function (as you can see by the demo), but not in my css file.
jsFiddle with solution

I'm not very familiar with css transform but using the dev tools I inspected the css after jquery transit executed mouseout and replaced your transform and perspective css with that and it looks like it works:
transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
-webkit-transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
http://jsfiddle.net/bbird/Whqv7/

jQuery animate problems

I use the following snippet to make an element's background lightblue, then slowly fade to whiite over 30 seconds:
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);
Two questions.
First, instead of fading to white, is there a way to fade opacity to 100%? That way I don't have to change "white" if I choose to change the page's background color?
Second, about once out of every 10 or 15 times, the background stays lightblue and fails to fade to white. I'm using the latest versions of jQuery and the UI core. What could be going wrong?
EDIT: Bounty is for a solution to problem regarding second question.
EDIT2:
Apparently I got downvoted into oblivion because I said I rolled my own solution but didn't show it. My bad. I didn't want to be self-promoting. My code works 100% of the time and doesn't require jQuery. A demonstration and the code can be found at:
http://prettycode.org/2009/07/30/fade-background-color-in-javascript/

For your second question: in my experience this is usually because a Javascript error has occurred somewhere else on the page. Once there is one Javascript exception, the rest of the page stops running Javascript. Try installing Firebug (if you haven't already), then open up the "Console" tab and enable it. Then any javascript errors or exceptions will be printed to the console.
Another thing to try (which kinda contradicts my last statement...) is to disable all your browser plug-ins to see if you can recreate. Sometimes they interfere with scripts on the page (particularly GreaseMonkey.)
If you could provide a sample HTML snippet which reproduces this animation problem it would be a lot easier for us to help you. In the script I have pasted below, I can click it all day, as fast or slow as I like, and it never fails to animate for me.
For the first question: I know you said you'd found a workaround, but the following works for me (even on IE6) so I thought I'd post it, since it may be different from what you were thinking. (Note that setting CSS "opacity" property through jQuery.css() works on IE, whereas IE does not support the "opacity" property directly in CSS.)
<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
$('#test').css('opacity', myOpacity);
$('a').click(function(){
myOpacity = 1.0 - myOpacity;
$('#test').animate({ opacity: myOpacity });
return false;
});
});
</script>
</head>
<body>
<p>Click me</p>
<div id="test">Test</div>
</body></html>

Dont forget the color plugin.
See here
When the color fails to animate to blue you could try to use the callback function to log a message to the console. You can then check that the event actually fired and completed. If it does then you could potentially use two animates. The first one to animate to a halfway house color then the use the callback to animate to white (so you get two bites of the cherry, if the outer fails but completes the callback has a second go)
It would be good if you could try to recreate the issue or give a url of the issue itself.
e.g
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
$(this).animate({ backgroundColor: "#ffffff" }, 15000)
});

You could always use something like this, avoiding the JQuery animate method entirely.
setTimeout(function() { UpdateBackgroundColor(); }, 10);
UpdateBackgroundColor() {
// Get the element.
// Check it's current background color.
// Move it one step closer to desired goal.
if (!done) {
setTimeout(UpdateBackgroundColor, 10);
}
}
Also, you may be able to remove the "white" coding by reading the background color from the appropriate item (which may involve walking up the tree).

It is possible to have jQuery change the Opacity CSS property of an item (as mentioned in another answer), but there's two reasons why that wouldn't work for your scenario. Firstly, making something "100% opaque" is fully visible. If the item didn't have any other modifications to its opacity, the default opacity is 100%, and there would be no change, so I'm guessing you meant fading to 0% opacity, which would be disappearing. This would get rid of the light blue background, but also the text on top of it, which I don't think was your intent.
A potentially easy fix for your situation is to change the color word "white" to "transparent" in your original code listing. The color plugin may not recognize that color word (haven't checked documentation on that yet), but setting the background color to "transparent" will let whatever color behind it (page background, if nothing else) shine through, and will self-update if you change your page background.

I'll answer your first question.
You can animate opacity like this:
.animate({opacity: 1.0}, 3000)
I think you can try using fadeOut/fadeIn too..

What about:
$("#" + post.Id).fadeIn( "slow" );

You could possibly have two divs that occupy the same space (using position: absolute; and position: relative; setting the z-index on one higher to make sure one is above and the other is below. the top one would have a transparent background and the one below would have a background color. then just fadeout the one below.

As for the second question:
If you think the default animation classes from JQuery are not properly working you could try Bernie's Better Animation Class. I have some good experiences with that library.

Animate only works for numbers. See the jquery docs. You can do opacity but you can't do background color. You can use the color plug in. Background-color uses strings like 'red', 'blue', '#493054' etc... which are not numbers.