Develop Reference

Animating the color of document's body using jQuery not working

I'm trying to animate the color of the body of the page using jQuery:
Here is the code I've tried but it doesn't work and nothing changes at all?!
$(document.body).animate({ backgroundColor: '#32a852' }, 1500);
Am I missing something?
I tried to just change the body like this and it works fine:
$(document.body).css("background-color", "yellow");

Quoting from https://api.jquery.com/animate/ :
"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)."
So seems like you need to use JQuery.Color plugin.

This works, I dont know what you are doing wrong
try this
$("body").animate({ backgroundColor: '#32a852' }, 1500);

Animate object off of screen with no lag

I've been using Animate.CSS and basic Jquery to animate elements on and off the screen. The issue is this has been creating a lot of lag due to a background slideshow occurring at the same time as the on screen animations. I've been looking into alternatives to help fix this issue.
I've read about using Opacity and TranslateZ etc to have elements come in and off of the page.
What would be the best way to change my code below to potentially lag less during animation?
//Screen 7 Start
//Highest Planned College
$( "#screen7" ).hide()
$(".buttonsQuestion7").click(function() {
$('#screen7').addClass('animated slideOutUp');
$('#screen7').fadeOut()
$( "#screen8" ).show()
$( "#screen8" ).addClass('animated slideInUp');
});

I had lag problems too with jQuery animations. The problem was lying in having several animations after one another like you have :
$('#screen7').fadeOut();
$( "#screen8" ).show();
What fixed it for me was to call the second animation in the callback of the first one like so:
$('#screen7').effect('fadeOut', {
direction: 'left',
mode: 'hide',
duration: '300',
complete: function(){
$('#screen8').show();
}
});
In this case i am using .effect() from jQuery UI but .fadeOut() has the same complete callback option
http://api.jquery.com/fadeout/
Hope that helps

jquery animate the page background-color on page load

I'm attempting to just change the background colour of a webpage upon page load. I see no reason why this shouldn't work, "body" is the correct element I wish to manipulate. I am using http://docs.jquery.com/UI/Effects/animate as a reference.
$(document).ready(function(){
$("body").animate({ backgroundColor: "#000000" }, 1000);
});

Working demo http://jsfiddle.net/aqrvA/8/
Add Jquery ui library as well please Rest will work like a rocket! < Your code is fine >
Jquery UI link: http://jqueryui.com/
Hope this helps, :)
Script:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$(document).ready(function(){
$("html body").animate({ backgroundColor: "#000000" }, 1000);
});​

You can't animate colors using only jQuery. You must use jQuery UI, that extends the animations to colors. Look here :)

"The jQuery UI effects core extends the animate function to be able to
animate colors as well. These transitions can animate the background
and border colors and accept colors specified in hex, rgb and color
names."
You will not be able to use animate function until you load jquery-ui.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
This is what you need.

Change the sliding speed of Coda Slider 1.1.1

I have a wordpress template that makes use of Coda Slider 1.1.1, and although I have figured out how to make it transition less frequently, I can't figure out how to change the physical speed at which the elements slide across the screen. I'm looking at the coda-slider.1.1.1.pack.js file but can't see it in there...

If you are using Coda slider 1.1.1 pack js.. You can use this code to auto slide :
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider({ continuous:true})
jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
var autoSlide = setInterval(function()
{
jQuery("#stripNavR0 a").click();
}, 6000);
});
Instead of #stripnavR0 a use the id for the div use on right click of your slider.

you can adjust the slide speed with that:
$().ready(function() {
$('#coda-slider').codaSlider({
autoSlide: true,
autoSlideInterval: 4000,
});
});
Cheers,
Stefan

Jquery fade background on hover?

There is a link, with no background, and a css rule, which changes background on hover.
Parent bg is white, link on hover - blue.
How can I do a hover effect slowly, from white to blue?
Thanks.
li a {}
li a:hover { background: blue; }

jQuery('a#theLink').hover(function(){
$(this).stop().animate({backgroundColor: 'blue'});
}, function() {
$(this).stop().animate({backgroundColor: 'white'});
});
For this to work you need to download the "color plugin" for jQuery.

You don't need an extra color plugin. You just need jQuery UI on top of jQuery, which lets you do animations also on color. (Or if you don't want to use jQuery UI for some reason, I guess another plugin will do the trick. But I have successfully tried this with just including jQuery core and jQuery UI.)
Animation itself goes something like...
$("li").hover(function() {
$(this).animate({
backgroundColor: "#ffffff"
}, 'slow');
});

bgFade a very great and simple plugin that animates de background image:
http://www.isthatclear.com/jquery/bgFade/

In order to animate colors, you need the color plugin

You'll need to use a plugin as JQuery can't animate colours out of the box.
Try the Colour Animation plugin
Then it'll be something like:
$(this).animate({ backgroundColor: "blue" }, 'slow');