jQuery animate problems

Question

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/

Have you got a link to the issue? If not can you reproduce it at pastebin.me or jsbin.com? — redsquare, Jul 31 '09 at 23:12
-1: argumentative phrasing in the second question. Also, browser configuration and the markup with the problem would help to diagnose. — Dan Davies Brackett, Aug 04 '09 at 15:54
From http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback: "Only properties that take numeric values are supported (e.g. backgroundColor is not supported)." — Ian Oxley, Aug 05 '09 at 12:59
@DDavies, I've edited out the argumentative phrasing. IMO editing in these cases is a better solution than just downvoting away :) — bdonlan, Aug 07 '09 at 17:55
He answered his own question (and his answer really didn't apply to his question, just what he was doing instead). — stevedbrown, Aug 07 '09 at 19:43
also, he seems to have completely abandoned this question shortly after posting the bounty, and never provided any further details about the problem he's talking about when the animation fails — Kip, Aug 07 '09 at 20:08

Kip · Accepted Answer · 2009-08-06T19:57:40.513

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><a href="#">Click me</a></p>
<div id="test">Test</div>
</body></html>

we actually have this problem on Stack Overflow, so thank you for that. Jarrod can chime in with our hacky workaround.. — Jeff Atwood, Aug 08 '09 at 18:10

score 9 · Answer 2 · edited May 23 '17 at 12:19

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

Downvoters I would welcome an explanation. The answer is correct to his original question. He then changed the goalposts and I have added some ideas. — redsquare, Aug 07 '09 at 15:51

score 3 · Answer 3 · answered Jul 31 '09 at 20:11

3

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).

answered Jul 31 '09 at 20:11

John Fisher

22,355
2
39
64

Did that. Rolled my own. Works great for a couple elements, but if you're trying to fade 20 or 30 at a time, controlling how long the fade takes to occur becomes a very complex issue because of timer idiosyncrasies. Thanks though. – core Jul 31 '09 at 21:54

score 2 · Answer 4 · answered Aug 06 '09 at 17:39

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.

score 1 · Answer 5 · answered Jul 23 '09 at 21:00

1

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..

answered Jul 23 '09 at 21:00

CD..

72,281
25
154
163

This does not change the opacity of the background color. – core Jul 23 '09 at 21:08

score 0 · Answer 6 · 2009-08-04T15:37:10.520

0

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.

edited Aug 04 '09 at 15:37

answered Jul 23 '09 at 20:57

4

you can do color if you use the color plugin – redsquare Jul 23 '09 at 21:02

Mark L · Answer 7 · 2009-07-23T21:04:50.443

0

What about:

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

edited Jul 23 '09 at 21:04

answered Jul 23 '09 at 20:59

Mark L

12,405
4
28
41

or, for variable opacity, fadeTo. – Dan Davies Brackett Jul 23 '09 at 21:00
That fades IN the ENITRE element. I'm fading OUT the BACKGROUND color. – core Jul 23 '09 at 21:09

score 0 · Answer 8 · answered Jul 31 '09 at 20:10

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.

score 0 · Answer 9 · answered Aug 04 '09 at 06:22

0

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.

answered Aug 04 '09 at 06:22

Huppie

11,263
4
32
34

jQuery animate problems

EDIT2:

9 Answers9