HTML element does not fade in using jquery

Question

I have a small web project as you can see here: http://seegermattijs.be/pickone/ When you insert two items, the pick one button should fade in. Unfortunately it does not fade. I use the following code:

$('.bigBtn').fadeIn('slow');

and in the begininning I make .bigBtn invisible:

$('.bigBtn').hide()

What am I doing wrong?

Answer 1

The CSS transitions that you have applied to every element on the page (very beginning of your css/main.css):

* {
    transition: all .1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
}

are clashing with the jQuery fade animation.

Remove the CSS transitions from your button using something like:

.bigBtn {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
}

(Or better still, only apply them where you want them in the first place).

Your .fadeIn('slow') will then work.

Answer 2

$('.add').on('click',function(){
    var items = $('.items > h2').length;
    if(items >= 2) {
       $('.bigBtn').fadeIn('slow');
    }
});