Исчезающее фоновое изображение!
Доброго времени суток! Есть html код:
<div id="threeRow" class="row"> <div id="threeRowOne" class="col-sm-6 col-md-6 col-lg-6"><div class="fog"> <a href="#">Мои дневники</a> </div></div> <div id="threeRowTwo" class="col-sm-6 col-md-6 col-lg-6"><div class="fog"> <a href="#">Мои альбомы</a> </div></div> </div> Сопровождается следующим стилем: Код:
#threeRow{ $('#threeRowOne a').click(function(){ $('#oneRow').animate({height:'0%'},1000); $('#threeRow').animate({height:'100%'},1000); $('#threeRowOne').animate({width:'100%'},1000); $('#threeRowTwo').animate({width:'0%'},1000); $('#twoRowOne img').animate({left:'100%'},1000, function(){ $('#twoRowOne img').attr('src', 'img/index/nav.png'); }); row = 'two'; }); $('#threeRowTwo').click(function(){ $('#oneRow').animate({height:'0%'},1000); $('#threeRow').animate({height:'100%'},1000); $('#threeRowOne').animate({width:'0%'},1000); $('#threeRowTwo').animate({width:'100%'},1000); $('#twoRowOne img').animate({left:'0%'},1000, function(){ $('#twoRowOne img').attr('src', 'img/index/nav.png'); }); row = 'two'; }); $('#twoRowOne img').click(function(){ if(row == 'one'){ $('#oneRow').animate({height:'50%'},1000); $('#oneRowOne').animate({width:'50%'},1000); $('#oneRowTwo').animate({width:'50%'},1000); $('#twoRowOne img').animate({left:'50%'},1000); $('#twoRowOne img').attr('src', imgUser); row = 0; } else if(row == 'two'){ $('#threeRowOne').animate({width:'50%'},1000); $('#threeRowTwo').animate({width:'50%'},1000); $('#threeRow').animate({height:'50%'},1000); $('#oneRow').animate({height:'50%'},1000); $('#twoRowOne img').animate({left:'50%'},1000); $('#twoRowOne img').attr('src', imgUser); row = 0; } }); Когда разворачивается блок #threeRowOne или #threeRowTwo фоновое изображение во время сворачивания во втором блоке пропадает и появляется по окончанию разворачивания. В первом блоке все нормально! Причем только в Chrom, а в FireFox все нормально. В чем может быть причина? |
Часовой пояс GMT +3, время: 23:45. |