Advise guidance on how to form this jQuery script for show/hide fade element
Posted
by
Rick
on Stack Overflow
See other posts from Stack Overflow
or by Rick
Published on 2010-12-27T16:14:54Z
Indexed on
2010/12/27
17:54 UTC
Read the original article
Hit count: 236
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...
© Stack Overflow or respective owner