Question

我试图在水平滑块中淡化文字内容。实际上，当我在#directions菜单项中时，我希望淡化我的文本。我试了一下，但似乎没有用。

在我的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');

你知道我做错了什么吗？问候，贾罗德。

Answer 1

更改以下内容

#test p.load{
    opacity: 1;
}

到这个

.shown #test p{
    opacity: 1;
}

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

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/

Jquery css fadein文本

2 个答案: