title: JQuery UI Tabs: Apply opacity toggle to only specific inner element?
body: <p>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.</p>
  
  <p>So, If I have something like this:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
     &lt;ul id="tabs-nav&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
     &lt;div id="tab-1"&gt;
        &lt;img /&gt;
        &lt;p /&gt;
     &lt;/div&gt;
     &lt;div id="tab-2"&gt;
        &lt;img /&gt;
        &lt;p /&gt;
     &lt;/div&gt;
     ...etc
  &lt;/div&gt;
  </code></pre>
  
  <p>How could I set it so that only the <code>&lt;img&gt;</code> has an effect applied, and the rest just switches normally?</p>
  
  <p>Here are the basics of the call I have for UI tabs:</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <hr>
  
  <p>UPDATE:  So this is what I ended up with based on karim79's suggestions, and it seems to work. I added this after the original code I showed above (and removed <code>{fx: { opacity: 'toggle' } }</code> from my original code):</p>
  
  <pre><code>$( "#slides" ).bind( "tabsselect", function(event, ui) {
          $(ui.panel).find("img").fadeOut().fadeIn();
  });
  </code></pre>
  
  <p>I'm going to explain my logic, because like I said, my understanding is basic, so I'd love to know if my rationale is off!</p>
  
  <p>I removed karim79's coniditional statement, because I want this to apply to ALL of the tabs.  Am I correct in understanding that an <code>if(ui.index == 2)</code> would only apply to the third tab?</p>
  
  <p>Then, I changed the <code>.css("opacity", 0.6)</code> to <code>.fadeOut().fadeIn()</code> because the .css opacity was only succeeding in making all of the slides semi-transparent, but not fading anything in or out.</p>
  
  <p>Would this be an acceptable way of doing this or is it somehow hackish?</p>