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

Question

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;
});

---

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 {fx: { opacity: 'toggle' } } from my original code):

$( "#slides" ).bind( "tabsselect", function(event, ui) {
        $(ui.panel).find("img").fadeOut().fadeIn();
});

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!

I removed karim79's coniditional statement, because I want this to apply to ALL of the tabs. Am I correct in understanding that an if(ui.index == 2) would only apply to the third tab?

Then, I changed the .css("opacity", 0.6) to .fadeOut().fadeIn() because the .css opacity was only succeeding in making all of the slides semi-transparent, but not fading anything in or out.

Would this be an acceptable way of doing this or is it somehow hackish?

Answer 1

This should do it:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
    if(ui.index == 2) { // or whatever index you're interested in
        $(ui.panel).find("img").css("opacity", 0.6);
    }
});