jQuery 'animate height'/'slideDown' комбинация, при которой цвет фона исчезает при активации во второй раз

Question

У меня есть анимация, где div 'rightContentSpacer' увеличивается в высоту, когда я нажимаю на любую из трех ссылок. 'rightContentSpacer' тем самым перекрывает div, который отображается в это время, который когда-то перекрывался, я прячусь, чтобы освободить место для следующего div. «rightContentSpacer», после задержки, впоследствии снова уменьшает высоту, чтобы открыть новый, теперь показанный div (т. е. div, соответствующий нажатой ссылке). Эффект сродни туману, поднимающемуся и опускающемуся.

Моя проблема: это работает отлично в первый раз. Тем не менее, если второй раз нажать «ту же» ссылку (независимо от того, будет ли она после активации 1 или обоих других ссылок в среднем времени), цвет фона исчезает. Это происходит для каждого div - цвет фона - это первый раз, когда он «показан»; но если это показано дважды, цвет фона исчезает во втором шоу.

Как я могу предотвратить исчезновение фона?

JQuery:

$("#linkSweaters").click(function(){ 
    if ($('#rightContentService').css('display') == 'none' && $('#rightContentContact').css('display') == 'block'){ 
     $("#rightContentSpacer").animate({ 
      height: "100%", 
      },1000); 
     $("#rightContentContact").animate({ 
      height: "0", 
      },1000); 
     $("#rightContentContact").hide({ 
      }); 
     $('#rightContentSweaters').delay(2000).slideDown(1000, function() { 
      }); 
     $("#rightContentSpacer").delay(1000).animate({ 
      height: "10%", 
      },1000); 

    } else if ($('#rightContentService').css('display') == 'block' && $('#rightContentContact').css('display') == 'none'){ 
     $("#rightContentSpacer").animate({ 
      height: "100%", 
      },1000); 
     $("#rightContentService").animate({ 
      height: "0", 
      },1000); 
     $("#rightContentService").hide({ 
      }); 
     $('#rightContentSweaters').delay(2000).slideDown(1000, function() { 
      }); 
     $("#rightContentSpacer").delay(1000).animate({ 
      height: "10%", 
      },1000); 

    } else if ($('#rightContentSweaters').css('display') == 'block'){ 
     $("#linkContact").off('click'); 
      } 

    }); 

</script> 

Соответствующий CSS:

 #rightContent { 
      } 

      #rightContentSpacer { 
       height: 10%; 
       margin:0 auto; 
       background-color:; 
       } 

      #rightContentService { 
       height: 90%; 
       width:650px; 
       margin:0 auto; 
       background-color: red; 
       position:absolute; 
       display:block; 
       } 

      #rightContentSweaters { 
       height: 90%; 
       width:650px; 
       margin:0 auto; 
       background-color: red; 
       position:absolute; 
       display:none; 
       } 

      #rightContentContact { 
       height: 90%; 
       width:650px; 
       margin:0 auto; 
       background-color: red; 
       position:absolute; 
       display:none; 
       } 

Для полного примера экрана, видим следующее: https://jsfiddle.net/ff3r8t9x/embedded/result/

Для кода с примером: https://jsfiddle.net/ff3r8t9x/

Советую вам нажать «Свитера», затем «Швея», а затем еще раз «Свитера», чтобы понять, что я имею в виду.

Answer 1

Учитывая ваши примеры скрипки, я бы изменить HTML вашей «ссылки», чтобы быть фактическими ссылками - использовать следующий стиль, чтобы сделать новые ссылки выглядят как ваш старые:

.link {color:#ffffff; text-decoration:none;} 

Затем добавить класс блокам контента, а затем вы можете массово упростить ваш Jquery к:

var contentDivs = $('#rightContent').children('div.content'), 
    spacer = $('#rightContentSpacer'); 

$('.link').click(function (e) { 
    e.preventDefault(); 
    var contentToShow = $($(this).attr('href')); 
    if (!contentToShow.is(':visible') && !spacer.is(':animated')) { 
     spacer.stop().animate({ height: '100%' }, 1000, function() { 
      contentDivs.hide(); 
      contentToShow.show(); 
      spacer.animate({ height: '10%' }, 1000); 
     }); 
    } 
}); 

Updated fiddle

Но в ответ на исходный вопрос, на б ackground исчезает, потому что высота вашего содержимого div равна 0 - я думаю, что вы оживляете высоту до 90%, но анимация запускается в то время, когда div либо не виден, либо место, где он сидел, имеет высоту 0 (поэтому 90% от 0 будет 0)