Jquery: Can't fade in element

Question

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>

I don't get what you tried to do. Fading out and in are supposed to happen at the same time ? Can you describe the goal and make a fiddle ? — Denys Séguret, Sep 04 '14 at 14:38
That is not the css of the span. That is the css for a pseudo-element nested within a child of the span. — James Montagne, Sep 04 '14 at 14:39
If you start the `span` with `display:none` it works well: http://jsfiddle.net/oqfhuLzn/2/ — LcSalazar, Sep 04 '14 at 14:40
Sorry I just metioned that the fadeOut() works fine, while when I just change that to fadeIn() and add display:none to the opacity,fade In doesnt work — Noob17, Sep 04 '14 at 14:41

score 1 · Answer 1 · answered Sep 04 '14 at 14:45

1

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

answered Sep 04 '14 at 14:45

LcSalazar

16,524
3
37
69

score 1 · Answer 2 · edited Sep 25 '18 at 07:53

1

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

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

edited Sep 25 '18 at 07:53

Community

1
1

answered Sep 04 '14 at 14:48

Miguel Mota

20,135
5
45
64

score 0 · Accepted Answer · answered Sep 04 '14 at 14:42

0

Maybe you're looking for something like

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

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

answered Sep 04 '14 at 14:42

evu

1,031
2
10
29

score 0 · Answer 4 · answered Sep 04 '14 at 14:47

0

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/

answered Sep 04 '14 at 14:47

Christoph

1,993
1
25
33

Jquery: Can't fade in element

4 Answers4