Search code examples
jqueryfadein

HTML element does not fade in using jquery

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?

Solution

  • 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.