peppericious Posted February 19, 2012 Share Posted February 19, 2012 I'm pulling pairs of sentences out of a database using php (for students I'm teaching). The pairs of sentences are formatted something like this: <p><span class="sentence">This is the primary sentence (in French).</span><br /><span class="translation">This is a translation of the sentence (in English).</span></p> I'm already loading jQuery on the page (for other functionality). How can I script something so that, when I roll over a 'sentence' span, the 'translation' span will fade in to visible, and will then fade out again - to invisible – when I roll off the corresponding 'sentence' span? (So, to clarify, the 'translation' spans are invisible initially but become visible when the corresponding 'sentence' span is rolled over.) Is it possible? Am I making sense?... Be gentle... I'm brand new to javascript... Quote Link to comment Share on other sites More sharing options...
smerny Posted February 19, 2012 Share Posted February 19, 2012 these pages have the functions you'll want to use and examples http://api.jquery.com/fadeOut/ http://api.jquery.com/fadeIn/ Quote Link to comment Share on other sites More sharing options...
peppericious Posted February 20, 2012 Author Share Posted February 20, 2012 these pages have the functions you'll want to use and examples http://api.jquery.com/fadeOut/ http://api.jquery.com/fadeIn/ Thanks, I've already figured out now how to target *all* items with a particular class. Still some work to do before I can target individual sentence pairs, but I'm on it... Quote Link to comment Share on other sites More sharing options...
peppericious Posted February 20, 2012 Author Share Posted February 20, 2012 I got this nailed down nicely, even though I say so myself, with the following: <script> $(document).ready(function() { $('.answer').hide(); $('.main h3').toggle( function() { $(this).next('.answer').slideDown(); }, function() { $(this).next('.answer').fadeOut(); } ); // end toggle }); // end ready </script> </head> <body> <div class='main'> <h3>Me voici à Nice.</h3> <div class='answer'> <p>Here I am in Nice.</p> </div> <h3>Je m'amuse bien avec mes amies Sara et Chloë.</h3> <div class='answer'> <p>I'm really having fun with my friends Sara and Chloë.</p> </div> </div> </body> Wow... this javascript/jQuery combination could be the catalyst for another addiction!... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.