JQuery UI Tabs: Apply opacity toggle to only specific inner element?

Posted by Kerri on Stack Overflow See other posts from Stack Overflow or by Kerri
Published on 2010-05-08T03:10:01Z Indexed on 2010/05/08 3:18 UTC
Read the original article Hit count: 332

Filed under:
|
|

I am using Jquery UI tabs, and have it set to toggle the opacity with each slide change. I'm wondering if there's a way to apply the opacity toggle to only a single element within each tab, instead of the entire tab. My understanding of jQuery is pretty basic, so bear with me.

So, If I have something like this:

<div id="tabs">
   <ul id="tabs-nav><li></li></ul>
   <div id="tab-1">
      <img />
      <p />
   </div>
   <div id="tab-2">
      <img />
      <p />
   </div>
   ...etc
</div>

How could I set it so that only the <img> has an effect applied, and the rest just switches normally?

Here are the basics of the call I have for UI tabs:

var $tabs = $('#slides').tabs({fx: { opacity: 'toggle' } });
$(".ui-tabs-panel").each(function(i){
    //stuff to create previous/next links
});
$('.next-tab, .prev-tab').click(function() {  
   $tabs.tabs('select', $(this).attr("rel"));
   return false;
});

© Stack Overflow or respective owner

Related posts about jquery-ui

Related posts about tabs