CODEWITHSUNDEEP
javascriptjquerycssjquery-animate
Quesofat
Quesofat

Reputation: 1531

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!

Upvotes: 0

Views: 52

Answers (3)

guest271314
guest271314

Reputation: 1

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>

Upvotes: 0

Travis J
Travis J

Reputation: 82267

You could make your color variable into a function that returns a calculated value each time

var color = fn => Math.floor(Math.random() * colors.length);

and then call it as a function when you reference the color index

backgroundColor: colors[color()]

Upvotes: 1

user3532862
user3532862

Reputation:

the firs thing struck is to place this string: var color = Math.floor(Math.random() * colors.length); within the event, so the color will be generated when click happens, otherwise it will be always the same color (I did not try it so maybe i'm wrong)

Upvotes: 1

Related Questions