Jquery css fadein text

Question

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.

Answer 1

Change the following

#test p.load{
    opacity: 1;
}

to this

.shown #test p{
    opacity: 1;
}

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

Answer 2

It should be much easier solution.

CSS:

#test p {
    display: none;
    font-size: 21px;
    margin-top: 25px;
    text-align: center;
}

Javascript:

$('#test p').fadeIn(1000)

jsfiddle: http://jsfiddle.net/tykpL/