Trouble with referencing a javascript variable using jquery

Trouble with referencing a javascript variable using jquery

I'm trying to animate a div element so that it changes its width. The
problem is that I want it to change its width to a variable that's stored
in a .js file and I'm not sure how to get it to recognize it.
My HTML code:
<section style="width:100%; height:120px; clear:both;" >
<section class="campaign_statistics" style="background-color:#EFEFEF;">
<?php include('progress_chart.php'); ?>
</section>
</section>
Uses include for that php file which contains:
if ($blog_id == 9)
echo
'
<script>
var percent = String(businessProgress.getPercent());
document.write(businessProgress.toString());
</script>
'
;
I defined the variable percent to be referenced in jquery. The .js file
has an object that I made that stores some variables and I made getters to
get their info when needed. The toString() method:
this.toString = function(){
var string = '<div class="campaign_progress" style="width:0%;"> <div
class="campaign_percentage_bar">' + String(this.getPercent()) + '%
Percent Unit Progress</div> <div class="campaign_dollars">$' +
mySlice(this.getCurrent()) + '<span class="goal"> of $' +
mySlice(this.getGoal()) + '</span></div></div>';
return string;
}
Basically builds the div element that I want to animate. The width is set
at 0% and when my jquery is called in the header:
<script>
$(document).ready(function() {
$(".campaign_percentage_bar").animate({width:String(percent)+'%')},
5000);
});
</script>
This is how I'm referencing that variable. I have the script calls in my
header, so that all should be ok. If you can give any suggestions or if I
need to clarify more or give more info, please comment.