Jump to content
  • 0

Плавное изменение прозрачности. Пролема с IE


DjTarik
 Share

Question

Пишу скрипт галереи (что-то типо "лайтбокса"). Во всех браузерах всё нормально, кроме IE.

Весь код, я думаю, будем слишком длинный, поэтому ссылка:

http://tarik.kasperovich.ru/test_11/index.html

Вёрстка такая:

<div id="Keeper" class="keeper">

<!-- eclipse -->
<div class="eclipse" id="Eclipse">

<!-- popup wrapper -->
<div class="popup-corn-wrap method-text" id="PopUpWrap">

<!-- corners & shadows -->
<div class="popup-corn-tl"><!-- // --></div>
<div class="popup-corn-tc"><!-- // --></div>
<div class="popup-corn-tr"><!-- // --></div>
<!-- // -->
<div class="popup-corn-cl"><!-- // --></div>
<div class="popup-corn-cr"><!-- // --></div>
<!-- // -->
<div class="popup-corn-bl"><!-- // --></div>
<div class="popup-corn-bc"><!-- // --></div>
<div class="popup-corn-br"><!-- // --></div>
<!-- // corners & shadows // -->

<!-- popup close button -->
<a href="#" class="popup-close" id="PopUpClose" title="Закрыть">
<img src="img/popup/spacer.gif" width="45" height="45" alt="Закрыть" />
</a>
<!-- // popup close button // -->

<!-- popup content -->
<div class="popup-corn-content" id="PopUpContent">

<!-- popup loader -->
<div class="popup-loader">
<h5>Загрузка...</h5>
<img src="img/popup/popup_loader.gif" width="220" height="19" title="Загрузка..." alt="Загрузка..." />
</div>
<!-- // popup loader // -->

<div id="PopupItem" class="popup-item editor">
<p>Содержимое</p>
</div>

</div>
<!-- // popup content // -->

</div>
<!-- // popup wrapper // -->

</div>
<!-- // eclipse // -->

</div>

Что не получается:

Специально сделал див-обертку для всего (#Keeper) - чтобы у него менять прозрачность с 0 до 100. Соответственно, я хочу всё содержимое плавно показать или скрыть (т.к. opacity наследуется). Работает везде, но только не в IE. В нём, такое чувство, что НЕ наследуется. O_o Прозрачность в IE действует только на блок #Keeper.

1. Почему?

2. Как мне достичь того, чтобы плавно показать всё содержимое.

P.S. надеюсь понятно объяснил =)

Тема относится как к JS так и к HTML - поэтому не знал, куда лучше запостить.

Спасибо.

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
(т.к. opacity наследуется)

Нет дружище, opacity не наследуется. Оно просто накладывает маску поверх всех потомков. В ИЕ нужно использовать фильтр, простую запись opacity: 0.2; он не поймёт.

Link to comment
Share on other sites

  • 0
Нет дружище, opacity не наследуется. Оно просто накладывает маску поверх всех потомков. В ИЕ нужно использовать фильтр, простую запись opacity: 0.2; он не поймёт.

Это я и имел ввиду)

Поверь, фильтр я юзаю =). В коде всё есть. Там всё просто. Когда нужно изменить прозрачность для одного конкретного элемента - нет проблем (в моём случае это видно, когда появляется фотография). А вот если попытаться замутить прозрачность на весь попап сразу - не олучается... ХЗ почему. =/

Link to comment
Share on other sites

  • 0
Плавное изменение прозрачности для IE реализовано в jQuery, можно посмотреть как там... копать в сторону атрибута opacity в animation

Спасибо, посмотрю, но у меня прозрачность тоже работает. Я так думаю, что проблема с альфа-фильтром для IE и вложеностью. Пока не могу понять, почему так...

Link to comment
Share on other sites

  • 0
Спасибо, посмотрю, но у меня прозрачность тоже работает. Я так думаю, что проблема с альфа-фильтром для IE и вложеностью. Пока не могу понять, почему так...

Плавное изменение прозрачности, оно у тебя в IE не работает =)

Link to comment
Share on other sites

  • 0

Значит, перепробовал все варианты, результат такой? для IE:

Если блок имеет фон в png24 (пишем фильтр) - то к нему уже нельзя применить ещё один фильтр (с прозрачностью). Как быть в таком случае?

Неужели это невозможно? O_o

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy