Вход

Просмотр полной версии : Мерцание блоков при при скрытии

vovammm
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>
рони
03.05.2014, 20:57
vovammm,
а макет в песочнице ? или тут
Пожалуйста, отформатируйте свой код!

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


... ваш код...



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
рони
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
04.05.2014, 06:32
Вопрос знатокам почему мерцают маленькие картинки - жать на маленькие ?!
Я, конечно, не знаток, но при увеличении времени анимации видно что проблема в том, что при анимации сбивается z-index, а после ее завершения возвращается обратно, отсюда и мерцание. Беглый гуглинг подсказал решение в виде указания position:relative для перекрывающих элементов.
http://learn.javascript.ru/play/Fwx6Pb
рони
04.05.2014, 10:50
jsnb,
Спасибо за решение!!!