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... Link to comment https://forums.phpfreaks.com/topic/257325-fading-in-a-span-on-rollover/ 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/ Link to comment https://forums.phpfreaks.com/topic/257325-fading-in-a-span-on-rollover/#findComment-1319005 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... Link to comment https://forums.phpfreaks.com/topic/257325-fading-in-a-span-on-rollover/#findComment-1319107 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!... Link to comment https://forums.phpfreaks.com/topic/257325-fading-in-a-span-on-rollover/#findComment-1319136 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.