Форум

vovammm · #1 (**permalink**) 03.05.2014, 19:45

Всем доброго времени суток. 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>

рони · #2 (**permalink**) 03.05.2014, 20:57

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 03.05.2014, 22:09

Вопрос знатокам почему мерцают маленькие картинки - жать на маленькие ?!

<!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>

jsnb · #4 (**permalink**) 04.05.2014, 06:32

Сообщение от рони

Вопрос знатокам почему мерцают маленькие картинки - жать на маленькие ?!

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

рони · #5 (**permalink**) 04.05.2014, 10:50

jsnb,
Спасибо за решение!!!

Форум

Справочник

Discord чат

Курсы javascript