jQuery CSS淡入文本

Question

我希望在我的水平滑块中淡入文本内容。实际上，当我在#directions菜单项中时，我想要淡入文本。我尝试了一些东西，但似乎不起作用。 我的fiddle 在我的HTML中，我有一个带有id的div标签：

<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>

我在我的CSS中定义了这个div的id为test，就像这样：

：

#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;
}

我的jQuery：

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

你知道我做错了什么吗？ 谢谢， Jarod。

- user979974

---

不是答案，但我认为所有问题都应该像这样设置 :) - Joakim M

@JoakimM 这个问题因为滑块而得到了赞，但是回答......等一下......没有总结，所以......关心所有的代码......然后稍后再得到答案可能或者 :)) ... :)) - Bhojendra Rauniyar

Answer 1

请修改以下内容

#test p.load{
    opacity: 1;
}

转换成这个

.shown #test p{
    opacity: 1;
}

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

- koningdavid

---

谢谢koningdavid。正是我想要的。它运行良好。 - user979974

似乎效果只起作用一次。我需要在#directions下每次重复效果。它对我的图像有效，但对我的文本无效。你知道我需要改变什么吗？ - user979974

@user979974，请使用.shown #test p代替.load #test p，我已经更新了我的答案。 - koningdavid

Answer 2

这应该是一个更简单的解决方案。

CSS：

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

Javascript：

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

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

- Someth Victory