Q:

Fade in an image based on class selected

I have a menu where each menu item has a class. 
<ul id="nav">
    <li><a href="#" class="selected">Choose a team</a>
        <ul>
            <li class="ari">Arizona Cardinals</li>
            <li class="atl">Atlanta Falcons</li>
        </ul>
    </li>
</ul>

I also have a series of images that live in uniques divs with the same id as the class in the menu.  They are at opacity .25 to start. 
<div id="ari" class="teamChart"></div>
<div id="atl" class="teamChart"></div>

When I select an item in the menu, I'm trying to use the class name to call the id name so I can fade it in.  Something like this...
$('#nav li ul li').click(function(){
    $youPicked = '"#'+$(this).attr('class')+'"';

            alert($youPicked); 
            //displays "#ari" when clicked. 

            $($youPicked).css('position', 'absolute');
            //hopefully will bring it to front

            //hoping to fadeIn
            $($youPicked).fadeTo('slow',1, function(){
                  //fadeIn complete
            });
});

If I can get it to work, great.  Or perhaps there's a more elegant way? 

A:

There is no need in double quotes for $youPicked variable.  You can rewrite your code as follows. 
$("#nav ul li").click(function() {
    var el = $("#" + this.className);
    el.css("position", "absolute");
    el.fadeTo("slow", 1, function() {
        //fadeIn complete
    });
});

BTW, I doubt if there is a need to do absolute positioning.  Try first without.