Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Исчезающее фоновое изображение! (https://javascript.ru/forum/xhtml-html-css/51922-ischezayushhee-fonovoe-izobrazhenie.html)

Makkssimka 25.11.2014 16:16

Исчезающее фоновое изображение!
 
Доброго времени суток! Есть 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{
        height:50%;
        margin-top:-2px;
        }
       
#threeRowOne{
        background-color:#0FF;
        height:100%;
        background-image:url(../img/index/three.jpg);
        background-size:cover;
        padding:0;
        margin-top:-2px;
        }
       
#threeRowTwo{
        background-color:#F0F;
        height:100%;
        background-image:url(../img/index/four.jpg);
        background-size:cover;
        padding:0;
        margin-top:-2px;
        }

B jQuery код:
$('#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.