Question

我有一个span元素，我想让它从display none中淡入。淡出效果完美无缺，但淡入淡出并不起作用，

这是span元素的css：

$(".button_5").hover(function () {
        $(".box5 span.info").fadeIn();
    });

//The fade out just works fine:

    $(".button_5").hover(function () {
        $(".box5 span.info").fadeOut();
    });

.box5 span.info:before{
        content:"15 vacatures";
        margin:0;
        padding:0 0 28px 0;
        display:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col1">
        <div class="button_5">
            <div class="box5">
                <br><br>
                <span class="title"></span><br/>
                <span class="info"></span>
            </div>
        </div> 
    </div>

Answer 1

您必须将display: none添加到span.info元素，才能淡入...

http://jsfiddle.net/oqfhuLzn/3/

.box5 span.info {
    display: none;
}

Answer 2

$(".button_5").hover(function () {
    $(".box5 span.info").fadeIn();
}, function () {
    $(".box5 span.info").fadeOut();
});

演示：http://jsfiddle.net/19ykuar2/2/

Answer 3

也许你正在寻找像

这样的东西

$(".button_5").hover(function () {
   $(".box5 span.info").fadeToggle();
});

http://jsfiddle.net/oqfhuLzn/2/

Answer 4

如果您移除:before并将display: 0更改为display:none;

，则您的代码有效

看看这个小提琴http://jsfiddle.net/qxu1gnme/1/

Jquery：无法淡入<span>元素</span>

4 个答案: