Quesurfin Quesurfin - 1 month ago 14
CSS Question

properties in .animate?

I am trying to have my background color change when somebody his a button however it doesn't seem to be working.

I'm storing hex colors in an array then usinf math.random to generate a random color. I've been debugging in chrome and can't figure out the issue.

$(document).ready(function() {
var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F', '#008080', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99', '#77b1a9', '#73a857'];


$("#getQuote").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/method=getQuote&format=json&lang=en", function(json) {
$(".id").html(JSON.stringify(json));
});
});

$("getQuote").click(function(){
var color = Math.floor(Math.random() * colors.length);
$("html body").animate({
backgroundColor: colors[color]
}, 1000);
});
});


edit I posted all of the code to give a better idea of what's going on

Thank you for any help!

Answer

There are four issues with javascript at Question.

  • Selector "getQuote" is not an html element; missing "#" at beginning of selector string.

  • jQuery .animate() does not animate colors by default

    Animation Properties and Values

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

  • Missing opening { at first parameter passed to .animate(); e.g., .animate({property:value})

  • color variable will not change at each click event at #getQuote element, as color is defined outside of .click() handler

You can use jQuery UI to animate colors

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];

  $("#getQuote").click(function() {
    var color = Math.floor(Math.random() * colors.length);
    $("html body").animate({
      backgroundColor: colors[color]
    }, 1000);
  });

})
body {
  width: 100vw;
  height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>

<body>
  <button id="getQuote">click</button>
</body>

You can alternatively utilize css transition at body selector, .css()

$(function() {

var colors = ['#E9967A', '#FF8C00', '#4682B4', '#CD853F'
              , '#008080', '#27ae60', '#2c3e50', '#f39c12'
              , '#e74c3c', '#9b59b6', '#fb9664', '#bdbb99'
              , '#77b1a9', '#73a857'];


  $("#getQuote").click(function() {
    var color = Math.floor(Math.random() * colors.length);
    $("html body").css("backgroundColor", colors[color]);
  });

})
body {
  width: 100vw;
  height: 100vh;
  transition: background-color 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
</script>

<body>
  <button id="getQuote">click</button>
</body>

Comments