jQuery Forum

Okay, I changed my script to this:

<script type="text/javascript">

$(document).ready(function(){
$("#under1text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under1text").hover(function(){
$(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
},function(){
$(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)

});

$(function() {                                                   // NEW
   $("#under1text").toggle(                                       // NEW
      function() { $("#content1").fadeOut(1000); },                // NEW
      function() { $("#content1").fadeIn(1000); },                 // NEW
      function() { $("#content2").fadeOut(1000); },               // NEW
      function() { $("#content3").fadeOut(1000); }                // NEW
);

});


$("#under2text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under2text").hover(function(){
$(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
},function(){
$(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)
});

$(function() {                                                 // NEW
   $("#under2text").toggle(                                 // NEW
      function() { $("#content2").fadeOut(1000); },          // NEW
      function() { $("#content2").fadeIn(1000); },           // NEW
      function() { $("#content1").fadeOut(1000); },         // NEW
      function() { $("#content3").fadeOut(1000); }          // NEW
);

});

$("#under3text").fadeTo(0, 0.0); // Set the opacity of div to fade when the page loads(fadetime, opacity)
$("#under3text").hover(function(){
   $(this).fadeTo(1000, 1.0); // Sets the opacity on hover(fadetime, opacity)
      },function(){
      $(this).fadeTo(1000, 0.0); // Sets the opacity back to original on mouseout(fadetime, opacity)
});

$(function() {                                            // NEW
   $("#under3text").toggle(                              // NEW
      function() { $("#content3").fadeOut(1000); },         // NEW
      function() { $("#content3").fadeIn(1000); },           // NEW
      function() { $("#content1").fadeOut(1000); },         // NEW
      function() { $("#content2").fadeOut(1000); }          // NEW
);

});
});
</script>


and it works like I want it to, except you have to double click to make it work! Why?

Okay, here is a better version. It seems that the toggle function is related to the comma (,) at the end of each line that contains the selector and the more of those commas that are nested thus within the toggle function, the more clicks one has to make on a designated element to initiate that function. That being the case, if one combines the fadeOut selectors into a single function call, that problem is nearly averted. It is still a bit buggy. If one clicks successively on each of the three elements, then clicks on any of the three, one can witness all three #content(N) panels fading. Then a double click is required to reset the next fadeIn. This is very close to what I want, but not quite.

I suppose that I shall dive into if/then statements, although I am not sure how it might look using the current method. What condition do I call under this scenario? Does using the fadeTo function cache an opacity value that can be used to pass parameters?

Anyway, here is the latest code

<script type="text/javascript">

$(document).ready(function(){
$("#under1text").fadeTo(0, 0.0);
$("#under1text").hover(function(){
   $(this).fadeTo(1000, 1.0);
      },function(){
         $(this).fadeTo(1000, 0.0);

});

$(function() {
   $("#under1text").toggle(
      function() { $("#content1").fadeIn(1000); },
      function() { $("#content1,#content2,#content3").fadeOut(1000); }
);

});

$("#under2text").fadeTo(0, 0.0);
$("#under2text").hover(function(){
   $(this).fadeTo(1000, 1.0);
      },function(){
         $(this).fadeTo(1000, 0.0);
});

$(function() {
   $("#under2text").toggle(
      function() { $("#content2").fadeIn(1000); },
      function() { $("#content2,#content1,#content3").fadeOut(1000); }
);

});

$("#under3text").fadeTo(0, 0.0);
$("#under3text").hover(function(){
   $(this).fadeTo(1000, 1.0);
      },function(){
         $(this).fadeTo(1000, 0.0);
});

$(function() {
   $("#under3text").toggle(
      function() { $("#content3").fadeIn(1000); },
      function() { $("#content3,#content1,#content2").fadeOut(1000); }
);

});
});

</script>

and does represent a pretty cool effect. Link remains the same as previously posted.

Thanks to all who replied (oh, wait...), but the question remains as to whether there is a better way to achieve exactly what I am looking for. Any takers?

Peace,