Trouble with referencing a javascript variable using jquery

Question

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.

Answer 1

尝试这个

$(".campaign_percentage_bar").animate({width:percent+'%'}, 5000);