Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.05.2014, 19:45
Новичок на форуме
Отправить личное сообщение для vovammm Посмотреть профиль Найти все сообщения от vovammm
 
Регистрация: 03.05.2014
Сообщений: 1

Мерцание блоков при при скрытии
Всем доброго времени суток. JS занимаюсь недавно столкнулся с проблемой, решение которой найти сразу не смог. есть несколько блоков, границы которых пересекаются. при нажатии на любой из мелких див блоков большой блок скрывается, меняется картинка в нем после чего он снова появляется, однако при появлении на доли секунды он перекрывает мелкие блоки. для большей понятности прилагаю рисунок и кусок кода, отвечающий за скрытие и появление. если кто сталкивался с этой проблемой и знает ее решение плз помогите)
Скрытие/показ див блока
jQuery("#kart_1").fadeOut(200, function(){
document.getElementById('kart_1').style.background Image = 'url(1.png)';});
jQuery("#kart_1").fadeIn(200);
Задание див броков
<div id="obol_1">
<div id="kart_1" style="width:360px; background-image:url(1.png); height:260px">
</div>
<div id="perekl_1" onclick="pereklfun1()" class="perekl" style="z-index:10 ;height:75; width:105px; margin-top:-20px; margin-left:50px;float:left">
<img src="11.png" >
</div>
<div id="perekl_2" onclick="pereklfun2()" class="perekl" style="z-index:2 ;height:75; width:105px; float:left; margin-top:-20px; margin-left:35px">
<img src="okno-standart1.png" >
</div>
</div>
Изображения:
Тип файла: jpg снимок.jpg (14.5 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 03.05.2014, 20:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

vovammm,
а макет в песочнице ? или тут
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 03.05.2014, 22:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Вопрос знатокам почему мерцают маленькие картинки - жать на маленькие ?!
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        div img {
            width: 100%;
            height: 100%;
        }
    </style>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function () {
            $("#perekl_1").click(
                function (event) {
                    $("#kart_1").fadeOut(200, function () {
                        $(this).css({
                            "backgroundImage": "url(http://javascript.ru/img/ws_1.png)"
                        }).fadeIn(200)
                    });
                });
            $("#perekl_2").click(
                function () {
                    $("#kart_1").fadeOut(200, function () {
                        $(this).css({
                            "backgroundImage": "url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)"
                        }).fadeIn(200)
                    });
                });
        })
    </script>
</head>

<body>
    <div id="obol_1">
        <div id="kart_1" style=" ;width:360px; background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif); height:260px">
        </div>
        <div id="perekl_1" class="perekl" style="z-index:10 ;height:75; width:105px; margin-top:-20px; margin-left:50px;float:left">
            <img src="http://javascript.ru/img/ws_1.png">
        </div>
        <div id="perekl_2" class="perekl" style="z-index:2 ;height:75; width:105px; float:left; margin-top:-20px; margin-left:35px">
            <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
        </div>
    </div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 04.05.2014, 06:32
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от рони Посмотреть сообщение
Вопрос знатокам почему мерцают маленькие картинки - жать на маленькие ?!
Я, конечно, не знаток, но при увеличении времени анимации видно что проблема в том, что при анимации сбивается z-index, а после ее завершения возвращается обратно, отсюда и мерцание. Беглый гуглинг подсказал решение в виде указания position:relative для перекрывающих элементов.
http://learn.javascript.ru/play/Fwx6Pb

Последний раз редактировалось jsnb, 04.05.2014 в 06:34.
Ответить с цитированием
  #5 (permalink)  
Старый 04.05.2014, 10:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

jsnb,
Спасибо за решение!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 12:24
getAllResponseHeaders() и status имеют смысл только при readyState==4? mister_maxim AJAX и COMET 7 27.03.2011 19:08
Проблема при скрытии блоков в Опере InviS (X)HTML/CSS 1 20.03.2011 12:43
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Печать невидимых блоков mixeeff Events/DOM/Window 7 11.03.2009 11:41