The animate method doesn't work?

The animate method doesn't work?
0

#1

$(document).ready(function(){

$("#new-quote").click(function(){
	
	
	
	var color = [ '#FFA07A', ' #48c9b0 ', '#008080', '#808080', '#800000', ' #FFC300 ', '#1abc9c'];
	var quotes = ["Hmm. We’re having trouble", "finding that site.", "We can’t connect to the server at codepen.io.",
	"If that address is correct, here are three other things you can try:", "Try again later.", "Check your network connection.", 
	"If you are connected but behind a firewall, check that Firefox has permission to access the Web."];
	
	var length = color.length;
	
	var randomValue = Math.floor(Math.random() * length);
		
	
	$("html body").animate({backgroundColor: color[randomValue]},1000);
	$("#tweet-quote").animate({backgroundColor: color[randomValue]},1000);
	$("#tumblr-quote").animate({backgroundColor: color[randomValue]},1000);
	$("#new-quote").animate({backgroundColor: color[randomValue]},1000);
	$("#quote").innerHTML = quotes[randomValue];
	
	
	
});

});


#2

Make sure you have added the jQuery UI library in addition to jQuery to your project.

FYI - Your quotes do not show, because you are not using the correct jQuery syntax. Read about the html method.


#3

i included the JQuery UI but still not working!


#4

Can you provide a link to your project code, so we can take a look at it?


#5

Sure


#6

Like I said before in my first reply, you need to add the jQuery UI library. You currently have the base jQuery library, but you need to add the UI library also.


#7

I added these linkes and still not working, try it yourself


#8

I already did and it works fine.


#9

great, show me how to add the jquery ui correctly


#10

Also look like you’re trying to reference files on your local machine, eg

<link rel="styleSheet" href="css/animate.css">

Don’t use link/script tags, go to settings and add the URL of the library you’re using to CSS/JS depending upon what it is.


#11

still not working.


#12

you can send me the edited code?


#13

On a phone, so can’t check for errors, but this still applies:

Don’t use link/script tags, go to settings and add the URL of the library you’re using to CSS/JS depending upon what it is.


#14

If you put the blurred out code in your Codepen, it should work. You will notice that I commented out the following line, because it was causing the scripts to break. Why? Because code pen expects the libraries to be adding via the settings (like @DanCouper mentioned). Without using Codepen, it should work. You will also notice that I used the full version of jQuery instead of the slim version, because the slim does not have all the functions needed for certain parts of the jQuery UI library to work properly.

Before I had your Codepen, I was using the full version of jQuery, so I was not having any trouble using your code.

<!--	<script src="js/customJs.js"></script>  -->
<html>
	<head>
		<title> Random Firefox Error Messages Machine</title>
		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
		<link rel = "styleSheet"  href = "css/style.css">
	</head>	
	<body style = "background-color: #333">
		<div class= "row">
			<div class= "col-sm-4">
			</div>
			<div class= "col-sm-4">
				<div class = "quote-box" id="quote-box">
					<div class="qoute" id = "quote">"Hmm. We’re having trouble"</div>
					
					<div class="buttons">
						<a id="tweet-quote"  class="button" title = "Tweet this quote!" target="_blank"
						href= "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22Houston%2C%20we%20have%20a%20problem.%22%20Apollo%2013"
						>
					    <i class="fa fa-twitter"></i>
						</a>
						
						<a id="tumblr-quote"  class="button" title = "post this quote on tumblr" target="_blank"
						href= "https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dquote%26tags%3Dquotes%252Cfreecodecamp%26caption%3DApollo%2B13%26content%3DHouston%252C%2Bwe%2Bhave%2Ba%2Bproblem.%26canonicalUrl%3Dhttps%253A%252F%252Fwww.tumblr.com%252Fbuttons%26shareSource%3Dtumblr_share_button%26_format%3Dhtml" 
						>
					    <i class="fa fa-tumblr"></i>
						</a>
						
						<button id="new-quote" class="button"  >
						New quote
						</button>
					</div>
					
					
				</div>
			</div>
			<div class= "col-sm-4">
			</div>
		</div>
	
	
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>	
<!--	<script src="js/customJs.js"></script>  -->
	
	
	</body>
</html>

#15

Thank you , you added the right links
these two scripts handled the problem

>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

#16

Thank you Dan
i get it