[jQuery] Tabs fade effect triggered from Select drop down?
I have used the Tabs feature in the past, and it worked great for a
smooth fade in and out toggle effect. Is there a way to achieve this,
but if my 'nav' is a select drop down? I have the select being able to
trigger the divs right now, but not sure how to get a smooth toggle on
the items, as the page loads with the items hidden. My current code
'works' but there is some issues with the z-indexes since it only
fades them down, not hides them. I also will have 5 options, and I
think adding the fadeTo 0 on each if statement is pretty damn sloppy.
Anyone have any ideas?
Currently I have:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#stockvector").css({opacity: 0});
$j("#font").css({opacity: 0});
$j("#thefiletype").change(function(){
var userpick = $j("#thefiletype option:selected").val();
if( userpick == 1){
$j("#stockvector").css({opacity: 0});
$j("#stockvector").show();
$j("#stockvector").fadeTo('slow', 1);
$j("#font").fadeTo('slow', 0);
}
if( userpick == 3){
$j("#font").css({opacity: 0});
$j("#font").show();
$j("#font").fadeTo('slow', 1);
$j("#stockvector").fadeTo('slow', 0);
}
});
});
</script>