Search code examples
jqueryhtmlcsstextfadein

Jquery css fadein text

I'm trying to fadein my text content in my horizontal slider. Actually, I want to fadein my text when I am in the #directions menu item. I tried something but it seems not working.

My fiddle

in my HTML, I have a div tag with an id :

<div id="directions" class="panel">
        <h2>Directions</h2>
        
        <div id="test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
    </div>

I defined this div id=test in my css like that:

#test p {
    opacity: 0;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;

    -webkit-transition: opacity 5s ease-in;
       -moz-transition: opacity 5s ease-in;
        -ms-transition: opacity 5s ease-in;
         -o-transition: opacity 5s ease-in;
            transition: opacity 5s ease-in;
}

#test p.load {
    opacity: 1;
}

My Jquery:

$('#wrap').find('#test').removeClass('load');
                $target.addClass('load');

Do you know what I'm doing wrong ? Regards, Jarod.

Solution

  • Change the following

    #test p.load{
    opacity: 1;
}

    to this

    .shown #test p{
    opacity: 1;
}

    http://jsfiddle.net/4RvWY/8/