jQuery: fadeIn/Out a <p> .. </p>

Topics: Administration, General
Sep 29, 2014 at 9:15 AM
Edited Sep 29, 2014 at 9:23 AM
thanks for your time and guidance.

I'm able to fadeOut a paragraph as shown in the definitions below:

CI page - body (the text I want to fadeIn/Out):
<p class="fading">Test fade IN-Out</p>
In MyStyle.css:
.fading{visibility: visible;}

In alternate 'Parts.Common.Body-url-random.cshtml':
<script > 
   $( "p.fading" ).fadeOut( 3500 );
</script >
HOWEVER: I'm not able to make the fadeIn option work!
I tried :
.fading{visibility: hidden;}
$( "p.fading" ).fadeIn( 1750 );

  • am I AT ALL on the right track?
your time and help is appreciated
Sep 29, 2014 at 2:29 PM

First of all I would use
@using (Script.Foot())
 $( "p.fading" ).fadeIn( 1750 );
for pudding the script at the end of the page, but that is not the point.

What happen? Is the parapgrah displayed or is it hidden? Maybe the js is executed but the dom isn't ready?

I only can guess but maybe you should try to use the jquery handler for document.ready.
@using (Script.Foot())
 $(function() {
  $( "p.fading" ).fadeIn( 1750 );
Sep 29, 2014 at 4:55 PM
As benschi11 pointed out, you should wrap it in the on ready function of jQuery in the Script.Foot(). What I would also do is to first hide it with JavaScript ,so when JavaScript is turned off it still works:
@using (Script.Foot()) {
Sep 30, 2014 at 7:02 AM
Thanks to Both for your time!

the shortest option which works just fine is:
$( "p" ).hide().fadeIn(4000 );

anyway I need to get more familiar around all these million effects!