CODEWITHSUNDEEP
jqueryfadein
Seeger Mattijs
Seeger Mattijs

Reputation: 149

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?

Upvotes: 3

Views: 2072

Answers (2)

Shai
Shai

Reputation: 7327

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.

Upvotes: 8

l2aelba
l2aelba

Reputation: 22217

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

Upvotes: 0

Related Questions