Forums

synic

So all I'm trying to do is fade the background of a black box to red on mouseover and back to black on mouseoff. I know how to do this, but it's not working for some reason. However, if I tell it to change another attribute, it will do that, but the background color won't change on hover.

I'm using the jQuery plug-in scrollable (http://flowplayer.org/tools/scrollable.html) on a page that contains 4 divs. Scrollable automatically generates a tiny nav bar to scroll through the content based on the number of divs there are.

Here is the css for the scrollable objects:

div.scrollable { 
    position: relative; 
    overflow: hidden;      
    background: transparent; 
    width: 775px;     
    height: 400px;     
} 

#content {     
    background: transparent;
	clear: both;
	position: absolute;
	width: 20000em;        
} 

#content div { 
    float: left;
    width: 775px; 
    height: 400px; 
    background: transparent;
	color: #000000; 
} 

div.navi {
	height: 20px;
	margin-left: 78px;
	width: 200px;
}

div.navi a {
	background: #000000;
	cursor: pointer;
	float: left;
	height: 10px;
	margin: 3px;
	width: 10px;
}

This is my javascript:

$(function () {  	
  	// initialize scrollable  
  	$('div.scrollable').scrollable({ 
        size: 1,
        vertical: false,
        loop: false,
        interval: 0,
        clickable: true,
        speed: 1000, 
        keyboard: true,        
        items: '#content',
        navi: '.navi',
        naviItem: 'a',
        easing: 'swing'
    });      
    
    $('.navi a').hover(function() {    	
    	$(this).animate({\"background\" : \"#9e2620\"}, 1000);    	
    }, function() {
    	$(this).animate({\"background\" : \"#000000\"}, 1000);
    });
        
});

I really don't understand why the background color won't change but if for instance I tell it to change the width, it will work fine. Anyone see something I don't?

synic

Nevermind, jQuery doesn't support animation of the background property.

chriscoyier

It does though.. you just need the color plugin:

http://plugins.jquery.com/files/jquery.color.js.txt

pab

there is also a background plug in for background animation

treehouse : what would you like to learn today?

Forums

jQuery Animate function