jQuery: Using normal function value as jquery value

Question

Essentially i'm trying to get the value 'col' that is set in the html, and use it as the value for backgroundColor.

Here's the script:

function bgc(col) {
        $("#BG") .animate({ backgroundColor: "col" }, 1000)
}

Here's the html:

<div id="BG">
    <a href="#" onclick="bgc(#ffffff);"></a>
</div>

Any help would be great, i've been fiddling for a while but i can't quite grasp it. Thanks

Answer 1

Try this:

function bgc(col) {
        $("#BG") .animate({ backgroundColor: col }, 1000)
}

and

<div id="BG">
    <a href="#" onclick="bgc('#ffffff');"></a>
</div>

Answer 2

You're quoting it in the wrong place:

function bgc(col) { 
        $("#BG") .animate({ backgroundColor: col }, 1000) 
} 


<div id="BG"> 
    <a href="#" onclick="bgc('#ffffff');"></a> 
</div>

On a further note, a better practice is to keep your markup and javascript separate. Note how this gracefully degrades if javascript is note enabled.

$(function() {
    $('#BG').find('a').show().click( function() {
         $('#BG').animate( { backgroundColor: '#ffffff' }, 1000 );
    });
});

<div id="BG">
    <a href="#" style="display: none;"></a>
</div>