Простой CSS не работает в Iceweasel 31.2

Question

Итак, я делаю сайт для родственника, я создал сайт, который сначала не отображается (display: none) и исчезает, когда пользователь щелкает где-то на странице.
Он очень хорошо работает с Chromium, но когда я пытаюсь использовать Iceweasel 31.2, CSS для той части страницы, которая должна постепенно исчезать, не загружается.

Функция javascript, которая вызывается при нажатии кнопки:

var openGallery = function(){
    $('section, nav, #topleft').fadeOut(400);
    $('#gallerie').toggle();
}

Это CSS участвует

#gallerie
{
position: relative;
height: 874px;
width: 1152px;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
margin: auto;
text-align: center;
}

#gallerie img:first-of-type
{
max-width: 1100px;
max-height: 720px;
display: block;
margin-left: auto;
margin-right: auto;
}

.close
{
display: inline-block;
position: absolute;
right: 5px;
top: 5px;
}

.left, .right
{
position: static;
top: 746px;
}

И, наконец, HTML-код, который постепенно исчезает (обратите внимание, что его часть JS происходит от некоторого PHP)

<div id="gallerie">
<script type="text/javascript">
var collection = [
    // "FILENAME" | "NAME" | WIDTH | HEIGHT
    ["6ème arrondissement-73 X 60.JPG","6ème arrondissement",1535,1832],
    (more data...)
    ["Sur la neige-55 X 46.JPG","Sur la neige",1853,1562]
]
</script>
    <h3>Gallerie</h3>
    <figure>
        <img src="data/tableaux/6ème arrondissement-73 X 60.JPG" class="big" title="6ème arrondissement" alt="0">
        <figcaption>6ème arrondissement</figcaption>
        <img src="images/left.png" alt="left" class="left" title="left"><img src="images/right.png" alt="right" class="right" title="right">
    </figure>
    <img src="images/close.png" class="close" title="Fermer la fenetre">
</div>

Я действительно не знаю, откуда может появиться ошибка. Спасибо за помощь мне.

Answer 1

Лично я бы использовал JQuery для переключения между событиями класса и использовал их для выполнения переходов и т. Д. В настоящее время CSS3 довольно хорош во всех браузерах.

Вместо:

$('section, nav, #topleft').fadeOut(400);

Я бы добавил CSS, который обрабатывает переход с переходом.

Проверьте ручку, которую я сделал здесь, чтобы увидеть эффект. Вы можете добавить toggleClass (); addClass (); или removeClass(); если вы выберете.

http://codepen.io/brycesnyder/pen/LEPJZg

РЕДАКТИРОВАТЬ: .toggle(); будет вызывать глупый эффект, я имел в виду.toggleClass ();