Unity Paradox Unity Paradox - 2 years ago 83
Javascript Question

How to animate an element's color from one color to another?

Okay, so I'm trying to make my own website, and I need to fade a paragraph in and out via a jQuery animation. For this, I've gotten jQuery UI, and I'm trying to animate a test element's color, but it doesn't seem to work. The div's initial color is a semi-transparent, light-grey color (rgba(191, 191, 191, 0.25) to be specific), and I'm trying to animate it to a fully-opaque black (#000000). I'm almost certain my syntax is correct, but I'm not sure I included everything in the right order in the document's header. Could I get some help here? Here's the code for the included scripts and stylesheets:

<link rel="stylesheet" type="text/css" href="mainpagestyle.css">

<script src="scripts/jquery-2.2.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script src="scripts/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="scripts/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

<script src="scripts/mainscript.js"></script>

Here's the code for "mainscript.js," in case it's anything to do with the script syntax:

$(".click-leftmenu").mouseup(function() {
if ($(this).attr("out") == 0) {
$(this).animate({width: "4em", height: "4em"}, 100);
$(this).prev().animate({height: "4em"}, 100);
$(".click-leftmenu[out=1]").prev().animate({width: "0%", height: "0%"});
$(".click-leftmenu").attr("out", 0);
$(this).prev().animate({width: "50%"}, 500);
$(this).prev().animate({height: "40em"});
$(this).prev().animate({color: "#000000"});
$(this).attr("out", 1);

Full code can be found here:



Answer Source

Use this to animate the background color. I'm not sure what the other elements are used for and since we don't have any HTML I excluded the rest.

$(document).on("click", ".click-leftmenu", function() {
    backgroundColor: "#000000"
  }, 1500);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download