Q:

How to add a simple transition using jquery

Sorry if i'm being a noob, i'm not that experienced with jquery (yet). I've been reading books but I can't figure out how to add a transition to this...
<script>
$(function(ready){
$('select[id="options-1"]').change(function(){  

if ($(this).val() == "1")
     $('.preview-1').addClass("active").siblings().removeClass("active");

if ($(this).val() == "2")
     $('.preview-2').addClass("active").siblings().removeClass("active");

if ($(this).val() == "3")
     $('.preview-3').addClass("active").siblings().removeClass("active");

if ($(this).val() == "4")
     $('.preview-4').addClass("active").siblings().removeClass("active");

if ($(this).val() == "5")
     $('.preview-5').addClass("active").siblings().removeClass("active");

});
});
</script>

This script gets the value from a drop down menu and uses it to change the class on an image (wrapped in an LI tag), which makes it visible:
<li id="preview-5869" class="preview-2">
<li id="preview-2388" class="preview-1 active">

The class 'active' makes the image visible. In the above two lines of code, the li tag with the class 'preview-1 active' will be visible.
What I am trying to do is make a transition that instead of changing the pictures instantly, there would be a nice fade effect. Could you guys please help me with this?
Thanks in advance.

A:

You can do that using jQuery's fadeIn and fadeOut function. This is my example for how I created that effect. Remember that you cannot slow down the process of removing a class name or adding a new one. So you need to first fadeOut all the elements that are visible at present and then fadeIn the one that has been selected. Here is my example for how I achieved this:
http://jsfiddle.net/sarcastyx/Xhu4x/

