By Anonymous (not verified) on

Hi,

I'm trying to add an animated color transition on a div in my theme using jQuery UI. It's the version that ships with Drupal 7.12. I'm adding it in a custom js file which I'm loading through the themename.info file. The file is loading properly, and I can trigger an alert box when I hover over the div, but I can't get the animated color transition to work. Here's the code:

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
		$('#region-postscript-first').hover(
		    function() {
		        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
		        }, function () {
		        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
		    });
  }
};
})(jQuery);

I can see that several jquery.ui.whatever files are being loaded in the head of the page. Is there another jquery.ui plugin that I have to manually load to get this to work?

Any help is appreciated.

⋅ Categories: Drupal 7.x

Comments

int_ua’s picture

int_ua commented

I'm having the same problem. Have you found a solution?

int_ua’s picture

int_ua commented

http://api.jquery.com/animate/#animation-properties

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

RAFA3L’s picture

RAFA3L commented

Same here, any idea?

RAFA3L’s picture

RAFA3L commented

Download this in your theme folder

https://github.com/jquery/jquery-color

or

http://stackoverflow.com/a/3155141

add this into .info file

scripts[] = jquery.color.js

and this into your js file

var $ob= jQuery.noConflict();
$ob(document).ready(function () {
	$ob('ul.menu li a').hover(
		function() {
			$ob(this).animate({ "backgroundColor":"rgba(255, 255, 255, .25)" }, 500);
		}, function() {
			$ob(this).animate({ "backgroundColor":"rgba(0, 0, 0, .25)" }, 500);
		}
	);
});