Firefox won't display hidden div when shown using jQuery

Question

I'm building a website that has a floating vimeo iframe in the center. By default, the vimeo container is set to "display:none;". Once the play button is clicked, I use jQuery to fade the iframe in.

It works in all browsers except for Firefox. I'm getting this error:

s.getComputedStyle(...) is null

Here's the code I'm using to fade in the div that contains the iframe:

$('a.playbutton').click(function(){
        $(this).hide();
        $('#cover-content').hide();
        $('.vimeo-container').css("display","table").fadeIn(animSpeed);
        player.api('play');
    });

I've tried using "display:block" as well as "display:table" and neither of them are working in Firefox.

Has anyone else experienced this issue, or know what's causing it?

Why are you using `display:block` and `fadeIn()` both. Use one — Shaunak D, Jul 15 '14 at 16:42
Related : **[getComputedStyle(..) is null](http://stackoverflow.com/q/22484768/3639582)** — Shaunak D, Jul 15 '14 at 16:45
@Shaunak D - I've tried just using fadeIn() and it didn't work either. I tried using the three rules in that other question (overflow, opacity, height), but that also didn't work. — Eric Wood, Jul 15 '14 at 16:59
@Amit Soni - I tried using visibility:hidden in my CSS and changing it to visibility:visible in jQuery, but that didn't work either. — Eric Wood, Jul 15 '14 at 17:01

score 0 · Answer 1 · answered Jul 15 '14 at 16:45

0

use this

 $('.vimeo-container').fadeIn(animSpeed);

instead of this

$('.vimeo-container').css("display","table").fadeIn(animSpeed);

answered Jul 15 '14 at 16:45

Cute_Ninja

4,742
4
39
63

I tried this as well, but the iframe still isn't fading in. – Eric Wood Jul 15 '14 at 16:59
Remove "display:none;" from the vimeo container. When you load the page, at that time, make it invisible by using fadeOut method. – Cute_Ninja Jul 15 '14 at 17:26

Firefox won't display hidden div when shown using jQuery

1 Answers1