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

Share Improve this question Follow asked Aug 27, 2009 at 3:09 Brad BirdsallBrad Birdsall 1,74333 gold badges2323 silver badges2727 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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!