JQuery css fadein text

Question

I am trying to change my text content in my horizontal slider. Actually, I want to change my text when I am in the #directions menu item. I tried something, but it seems that it does not work.

My violin

in my HTML, I have a div tag with 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 as follows:

#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 am doing wrong? Sincerely, Jarod.

Answer 1

Change the following

#test p.load{
    opacity: 1;
}

to that

.shown #test p{
    opacity: 1;
}

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

Answer 2

It should be a lot easier.

CSS

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

JavaScript:

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

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