Advise guidance on how to form this jQuery script for show/hide fade element

I basically have several links on the left side of the screen and on the right is a preview window. Below the preview window is another box for the affiliate link code. So what I am trying to do is create an affiliate page where you choose the banner size on the left by clicking on the link and on the right you see it dynamically change to the banner size and the code changes accordingly as well. So far I have the following code and it works but it seems very very cumbersome and bloated. Can you see if I can trim this down?

jQuery(".banner-style li").click(function() {
    jQuery(".banner-style li").removeClass("selected");
    jQuery(this).addClass("selected");
    var $banner = jQuery(this).attr("class");
    $banner = $banner.replace(" selected","");
    jQuery(".preview img").fadeOut('fast',function() { 
                       jQuery(".preview img").attr("src",
                       "http://localhost/site/banners/"+$banner+".jpg")
                       .fadeIn('slow');
            });
    jQuery(".code p").removeClass('hide').hide();
    jQuery(".code p."+$banner).show();
});

Also to note the fun开发者_运维百科ny thing is in FF, when you click for the first to on any link, the original image on the right fades out and in real quick and then it loads the "clicked" image. This does not happen in other browsers...

you could change:

jQuery(this).addClass("selected");
var $banner = jQuery(this).attr("class");
$banner = $banner.replace(" selected",""); 

into:

var $banner = jQuery(this).attr("class");
jQuery(this).addClass("selected");

by changing the line sequence and removing one line $banner is created just after adding the "selected" class and you avoid one line.

in this set you select what is already selected:

jQuery(".preview img").fadeOut('fast',function() {
    jQuery(".preview img").attr("src",
    "http://localhost/site/banners/"+$banner+".jpg")
    .fadeIn('slow');
});

perhaps better as:

jQuery(".preview img").fadeOut('fast',function() {
    jQuery(this).attr("src",
    "http://localhost/site/banners/"+$banner+".jpg")
    .fadeIn('slow');
});

reworked:

jQuery(".banner-style li").click(function() {
  jQuery(".banner-style li").removeClass("selected");
  var $banner = jQuery(this).attr("class");
  jQuery(this).addClass("selected");
  jQuery(".preview img").fadeOut('fast',function() {
        jQuery(this).attr("src",
        "http://localhost/site/banners/"+$banner+".jpg")
        .fadeIn('slow');
  });
  jQuery(".code p").removeClass('hide').hide();
  jQuery(".code p."+$banner).show();
});

EDIT: Note about your issue with FF, would have to see the markup Css but this line seems "odd" to me:

jQuery(".code p").removeClass('hide').hide();