I have implemented jQuery tabs and am using the opacity technique to fade one tab out and then fade another in. I would like to have the second image fade over the first and then hide the first image. That way the background behind the tabs will not be shown. Please advise.

Current jQuery code:

<script type="text/javascript">
    $(function() {
        $('#web-select').tabs({ fx: { opacity: 'toggle', duration:'fast'} });
    });
</script>

I have implemented jQuery tabs and am using the opacity technique to fade one tab out and then fade another in. I would like to have the second image fade over the first and then hide the first image. That way the background behind the tabs will not be shown. Please advise.

Current jQuery code:

<script type="text/javascript">
    $(function() {
        $('#web-select').tabs({ fx: { opacity: 'toggle', duration:'fast'} });
    });
</script>

• javascript
• jquery
• jquery-ui
• fade

• FYI: Code actually works with 1.8.15 now – chrisl-921fb74d Commented Aug 11, 2011 at 20:34

2 Answers 2

Your code above will work in the 1.6 UI, but in the 1.7.2 UI version try the following:

$('#web-select').tabs('option', 'fx', { opacity: 'toggle', duration: 'fast' });

You could use the .show() and .hide() snippets to do such a thing!