CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadein
Noob17
Noob17

Reputation: 720

Jquery: Can't fade in <span> element

I have have a span element that I want to let fade in from display none. Fading out works perfectly fine but Fading in just doesnt work,

Here is the css of the span element:

$(".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>

Upvotes: 0

Views: 1907

Answers (4)

Miguel
Miguel

Reputation: 20633

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

Demo: http://jsfiddle.net/19ykuar2/2/

Upvotes: 1

Christoph
Christoph

Reputation: 2053

Your code works if you remove the :before and change the display: 0 to display:none;

Take a look to this fiddle http://jsfiddle.net/qxu1gnme/1/

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

You must add display: none to your span.info element, in order to fade in...

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

.box5 span.info {
    display: none;
}

Upvotes: 1

evu
evu

Reputation: 1061

Maybe you're looking for something like

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

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

Upvotes: 0

Related Questions