Advise guidance on how to form this jQuery script for show/hide fade element
- by Rick
Hey guys..
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 funny 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...
