Objective

Сделать так, что текст является единственной вещью, которая выцветает и снаружи, в то время как контейнеры, которые содержат текст имеет фиксированную высоту, чтобы удалить Apperance текста прыжки
Удалить дублирования кода в scripts.js особенно со всеми заявлениями LET

Codepen: http://codepen.io/onlyandrewn/pen/NbdGrg

Проблема

У меня есть ряд панелей и по нажатию кнопки либо btn--previous или btn--next вы получите показали следующую панель в серии .panel--one, .panel--two, старый исчезает, а новая выцветает. Тем не менее, когда затухающие элементы внутри и вне текста, кажется, прыгают.Предотвращения Apperance прыжков при выцветании элементов внутри и вне

scripts.js

// Complete 
function completeStepOne() { 
    $(".circle--one").removeClass("is-selected"); 
    $(".check--one").removeClass("is-hidden"); 
    $(".text--one").addClass("is-strikethrough"); 
    $(".circle--one").addClass("is-completed"); 
    $(".number--one").addClass("is-hidden"); 
    $(".circle--two").addClass("is-selected"); 
    $(".text--two").removeClass("is-grey"); 
} 

function completeStepTwo() { 
    $(".circle--two").removeClass("is-selected"); 
    $(".check--two").removeClass("is-hidden"); 
    $(".text--two").addClass("is-strikethrough"); 
    $(".circle--two").addClass("is-completed"); 
    $(".number--two").addClass("is-hidden"); 
    $(".circle--three").addClass("is-selected"); 
    $(".text--three").removeClass("is-grey"); 
} 

function completeStepsOneTwo() { 
    $(".circle--one, .circle--two").removeClass("is-selected"); 
    $(".check--one, .check--two").removeClass("is-hidden"); 
    $(".text--one, .text--two").addClass("is-strikethrough"); 
    $(".circle--one, .circle--two").addClass("is-completed"); 
    $(".number--one, .number--two").addClass("is-hidden"); 
    $(".circle--three").addClass("is-selected"); 
    $(".text--three").removeClass("is-grey"); 
} 

// Incomplete 
function incompleteStepTwo() { 
    $(".number--one").removeClass("is-hidden"); 
    $(".circle--one").addClass("is-selected"); 
    $(".text--one").removeClass("is-strikethrough"); 
    $(".circle--two").removeClass("is-selected"); 
    $(".text--two").addClass("is-grey"); 
    $(".check--one").addClass("is-hidden"); 
} 

function incompleteStepThree() { 
    $(".number--two").removeClass("is-hidden"); 
    $(".circle--two").addClass("is-selected"); 
    $(".circle--two").removeClass("is-completed"); 
    $(".check--two").addClass("is-hidden"); 
    $(".text--two").removeClass("is-strikethrough"); 
    $(".circle--three").removeClass("is-selected"); 
    $(".text--three").addClass("is-grey"); 
} 

function incompleteStepsOneTwo() { 
    $(".number--one, .number--two").removeClass("is-hidden"); 
    $(".circle--one").addClass("is-selected"); 
    $(".circle--two").removeClass("is-completed"); 
    $(".check--one, .check--two").addClass("is-hidden"); 
    $(".text--one, .text--two").removeClass("is-strikethrough"); 
    $(".circle--two, .circle--three").removeClass("is-selected"); 
    $(".text--two, .text--three").addClass("is-grey"); 
} 

// Show panels 
function showPanelOne() { 
    $(".inner--one").fadeIn(); 
    $(".inner--one").removeClass("is-hidden"); 

    // Hide panels two and three 
    $(".inner--two").fadeOut(); 
    $(".inner--two").addClass("is-hidden"); 
    $(".inner--spend").fadeOut(); 
    $(".inner--spend").addClass("is-hidden"); 
} 

function showPanelHim() { 
    $(".panel--him").fadeIn(); 
    $(".inner--him").fadeIn(); 
    $(".panel--him").removeClass("is-hidden"); 
    $(".inner--him").removeClass("is-hidden"); 

    // Hide panels one and three 
    $(".inner--one").fadeOut(); 
    $(".inner--one").addClass("is-hidden"); 
    $(".inner--spend").fadeOut(); 
    $(".inner--spend").addClass("is-hidden"); 
} 

function showPanelHer() { 
    $(".panel--her").fadeIn(); 
    $(".inner--she").fadeIn(); 
    $(".panel--her").removeClass("is-hidden"); 
    $(".inner--she").removeClass("is-hidden"); 

    // Hide panels one and three 
    $(".inner--one").fadeOut(); 
    $(".inner--one").addClass("is-hidden"); 
    $(".inner--spend").fadeOut(); 
    $(".inner--spend").addClass("is-hidden"); 
} 

function showPanelAnyone() { 
    $(".panel--anyone").fadeIn(); 
    $(".inner--anyone").fadeIn(); 
    $(".panel--anyone").removeClass("is-hidden"); 
    $(".inner--anyone").removeClass("is-hidden"); 

    // Hide panels one and three 
    $(".inner--one").fadeOut(); 
    $(".inner--one").addClass("is-hidden"); 
    $(".inner--spend").fadeOut(); 
    $(".inner--spend").addClass("is-hidden"); 
} 

function showPanelThree() { 
    $(".panel--three").fadeIn(); 
    $(".inner--spend").fadeIn(); 
    $(".panel--three").removeClass("is-hidden"); 
    $(".inner--spend").removeClass("is-hidden"); 

    // Hide panels one and two 
    $(".inner--one").fadeOut(); 
    $(".inner--one").addClass("is-hidden"); 
    $(".inner--two").fadeOut(); 
    $(".inner--two").addClass("is-hidden"); 
} 

$(".btn--next").on("click", function(){ 

    // Progress bar circles 
    let circleOneSelected = $(".circle--one").hasClass("is-selected"); 
    let circleTwoSelected = $(".circle--two").hasClass("is-selected"); 
    let circleThreeSelected = $(".circle--three").hasClass("is-selected"); 

    // Panel One options 
    let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected"); 
    let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected"); 
    let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected"); 
    let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected"); 

    // Panel Two options 
    let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected"); 
    let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected"); 
    let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected"); 
    let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected"); 
    let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected"); 
    let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected"); 

    // Panel Three options 
    let under25 = $(".btn--option-25").hasClass("is-selected"); 
    let under50 = $(".btn--option-50").hasClass("is-selected"); 
    let under75 = $(".btn--option-75").hasClass("is-selected"); 
    let under100 = $(".btn--option-100").hasClass("is-selected"); 
    let under250 = $(".btn--option-u250").hasClass("is-selected"); 
    let over250 = $(".btn--option-o250").hasClass("is-selected"); 

    let btnLikeSelected = $(".btn--like").hasClass("is-selected"); 


    if (circleOneSelected) { 
     if (giftsforHimSelected) { 
      completeStepOne(); 
      showPanelHim(); 
     } else if (giftsforHerSelected) { 
      completeStepOne(); 
      showPanelHer(); 
     } else if (giftsforKidsSelected) { 
      completeStepsOneTwo(); 
      showPanelThree(); 
     } else if (giftsforAnyoneSelected) { 
      completeStepOne(); 
      showPanelAnyone(); 
     } 
    } 

    if (circleTwoSelected && btnLikeSelected) { 
     completeStepTwo(); 
     showPanelThree(); 
    } 

    if (circleThreeSelected && btnSpendSelected) { 
     // Do action 
    } 
}); 

$(".btn--previous").on("click", function(){ 

    // Progress bar circles 
    let circleOneSelected = $(".circle--one").hasClass("is-selected"); 
    let circleTwoSelected = $(".circle--two").hasClass("is-selected"); 
    let circleThreeSelected = $(".circle--three").hasClass("is-selected"); 

    // Panel One options 
    let giftsforHimSelected = $(".btn--option-him").hasClass("is-selected"); 
    let giftsforHerSelected = $(".btn--option-her").hasClass("is-selected"); 
    let giftsforKidsSelected = $(".btn--option-kids").hasClass("is-selected"); 
    let giftsforAnyoneSelected = $(".btn--option-anyone").hasClass("is-selected"); 

    // Panel Two options 
    let typeHimJewelry = $(".btn--option-him-jewelry").hasClass("is-selected"); 
    let typeHimScarves = $(".btn--option-him-scarves").hasClass("is-selected"); 
    let typeHimFishing = $(".btn--option-him-fishing").hasClass("is-selected"); 
    let typeHimCologne = $(".btn--option-him-cologne").hasClass("is-selected"); 
    let typeHimShirts = $(".btn--option-him-shirts").hasClass("is-selected"); 
    let typeHimSports = $(".btn--option-him-sports").hasClass("is-selected"); 

    // Panel Three options 
    let under25 = $(".btn--option-25").hasClass("is-selected"); 
    let under50 = $(".btn--option-50").hasClass("is-selected"); 
    let under75 = $(".btn--option-75").hasClass("is-selected"); 
    let under100 = $(".btn--option-100").hasClass("is-selected"); 
    let under250 = $(".btn--option-u250").hasClass("is-selected"); 
    let over250 = $(".btn--option-o250").hasClass("is-selected"); 

    let btnLikeSelected = $(".btn--like").hasClass("is-selected"); 
    let btnHimSelected = $(".btn--him").hasClass("is-selected"); 

    if (circleOneSelected) { 

    } 

    if (circleTwoSelected) { 
     incompleteStepTwo(); 
     showPanelOne(); 
    } 

    if (circleThreeSelected) { 


     if (giftsforHimSelected) { 
      incompleteStepThree(); 
      showPanelHim(); 
     } else if (giftsforHerSelected) { 
      incompleteStepThree(); 
      showPanelHer(); 
     } else if (giftsforKidsSelected) { 
      incompleteStepsOneTwo(); 
      showPanelOne(); 
     } else if (giftsforAnyoneSelected) { 
      incompleteStepThree(); 
      showPanelAnyone(); 
     } 
    } 
});

index.html

<!-- Panel One --> 
    <div class="panel panel--one"> 

     <div class="advertising advertising--horizontal"> 
      <img src="http://placehold.it/720x90"> 
     </div> 

     <section class="panel__progress"> 
      <ul> 
       <li> 
        <div class="panel__pick"> 
         <p class="panel__circle circle--one is-selected"> 
          <i class="fa fa-check check--one is-hidden" aria-hidden="true"></i> 
          <span class="panel__number number--one">1</span> 
         </p> 
         <p class="panel__text text--one">Choose a category</p> 
        </div> 
       </li> 
       <li> 
        <div class="panel__pick"> 
         <p class="panel__circle circle--two"> 
          <i class="fa fa-check check--two is-hidden" aria-hidden="true"></i> 
          <span class="panel__number number--two">2</span> 
         </p> 
         <p class="panel__text text--two is-grey">Pick some items</p> 
        </div> 
       </li> 
       <li> 
        <div class="panel__pick"> 
         <p class="panel__circle circle--three"> 
          <i class="fa fa-check check--three is-hidden" aria-hidden="true"></i> 
          <span class="panel__number number--three">3</span> 
         </p> 
         <p class="panel__text text--three is-grey">Name your budget</p> 
        </div> 
       </li> 
      </ul> 
     </section> <!-- .panel__progress --> 

     <div class="test"> 
      <div class="panel__inner inner--one"> 
       <div class="panel__info"> 
        <h2 class="panel__title">Who is the gift for?</h2> 
        <h3 class="panel__instructions pick--one">Pick one of the options below</h3> 
        <!-- <h3 class="panel__instructions">Eeny, meeny, miny, moe</h3> --> 
       </div> 

       <div class="button__group group--quarter"> 
        <button class="btn btn--option btn--option-him btn--who">Gifts for him <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-her btn--who">Gifts for her <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-kids btn--who">Gifts for kids <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-anyone btn--who">Gifts for anyone <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       </div> 

       <div class="button__group button__controls"> 
        <a href="/index.html"><button class="btn btn--previous previous--one"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button></a> 
        <button class="btn btn--next next--one">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button> 
       </div> 
      </div> <!-- .panel__inner --> 
     </div> 
    </div> <!-- .panel .panel--one --> 

    <!-- Panel Two --> 
    <!-- Gifts for Him --> 
    <div class="panel panel--two panel--him is-hidden"> 

     <div class="test"> 
      <div class="panel__inner inner--two inner--him"> 
       <div class="panel__info"> 
        <h2 class="panel__title">What are some things he might like?</h2> 
        <h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3> 
       </div> 

       <div class="button__group"> 
        <button class="btn btn--option btn--option-him-jewelry btn--like">Jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-him-scarves btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-him-fishing btn--like">Fishing <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-him-cologne btn--like">Cologne <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-him-shirts btn--like">Shirts <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
        <button class="btn btn--option btn--option-him-sports btn--like">Sports apparel <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       </div> 

       <div class="button__group button__controls"> 
        <button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button> 
        <button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button> 
       </div> 
      </div> <!-- .panel__inner --> 
     </div> <!-- .test --> 
    </div> <!-- .panel .panel--two --> 

    <!-- Panel Two --> 
    <!-- Gifts for Her --> 
    <div class="panel panel--two panel--her is-hidden"> 

<!--  <div class="advertising advertising--horizontal"> 
     <img src="http://placehold.it/720x90"> 
    </div> --> 

     <div class="panel__inner inner--two inner--she"> 
      <div class="panel__info"> 
       <h2 class="panel__title">What are some things she might like?</h2> 
       <h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3> 
      </div> 

      <div class="button__group"> 
       <button class="btn btn--option btn--like">Cashmere <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Perfume <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Scarves <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Sweaters <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Beauty <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Candles <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Necklaces <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Sports jewelry <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Watches <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
      </div> 

      <div class="button__group button__controls"> 
       <button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button> 
       <button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button> 
      </div> 
     </div> <!-- .panel__inner --> 
    </div> <!-- .panel .panel--two --> 

    <!-- Panel Two --> 
    <!-- Gifts for Anyone --> 
    <div class="panel panel--two panel--anyone is-hidden"> 

<!--  <div class="advertising advertising--horizontal"> 
     <img src="http://placehold.it/720x90"> 
    </div> --> 

     <div class="panel__inner inner--two inner--anyone"> 
      <div class="panel__info"> 
       <h2 class="panel__title">What are some things they might like?</h2> 
       <h3 class="panel__instructions pick--three">Pick three items below to help us narrow your search</h3> 
      </div> 

      <div class="button__group"> 
       <button class="btn btn--option btn--like">Cookbooks <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Spirits <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Suitcases/bags <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Food<i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Gardening <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Gadgets <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Made in St. Louis <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Gifts that give back <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Fitness <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Subscriptions <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Ornaments <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Pets <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Personalized <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like">Other <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--like is-hidden"> <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
      </div> 

      <div class="button__group button__controls"> 
       <button class="btn btn--previous previous--two"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button> 
       <button class="btn btn--next next--two">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button> 
      </div> 
     </div> <!-- .panel__inner --> 
    </div> <!-- .panel .panel--two --> 


    <!-- Panel Three --> 
    <div class="panel panel--three is-hidden"> 

<!--  <div class="advertising advertising--horizontal"> 
     <img src="http://placehold.it/720x90"> 
    </div> --> 

     <div class="panel__inner inner--spend"> 
      <div class="panel__info"> 
       <h2 class="panel__title">How much do you want to spend?</h2> 
       <h3 class="panel__instructions pick--one">Pick one of the options below</h3> 
       <!-- <h3 class="panel__instructions">Remember, it's the thought that counts</h3> --> 
      </div> 

      <div class="button__group"> 
       <button class="btn btn--option btn--option-25 btn--spend">Under $25 <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--option-50 btn--spend">Under $50 <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--option-75 btn--spend">Under $75 <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--option-100 btn--spend">Under $100 <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--option-u250 btn--spend">Under $250 <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
       <button class="btn btn--option btn--option-o250 btn--spend">$250 and over <i class="fa fa-check is-grey" aria-hidden="true"></i></button> 
      </div> 

      <div class="button__group button__controls"> 
       <button class="btn btn--previous previous--three"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Previous</button> 
       <a href="/gifts.html"><button class="btn btn--next next--three">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button></a> 
      </div> 
     </div> <!-- .panel__inner --> 
    </div> <!-- .panel .panel--three -->

app.css

/*---------------------------------- 
BUTTONS 
----------------------------------*/ 
.button__group { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    width: 75%; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    margin: 0 auto; 
    padding-left: 30px; 
} 
.button__group.group--quarter { 
    width: 50%; 
} 
.button__controls { 
    margin-top: 60px; 
    margin-bottom: 60px; 
} 
button { 
    display: block; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    padding: 20px; 
    padding-right: 60px; 
    padding-left: 60px; 
    cursor: pointer; 
    text-align: left; 
    border: none; 
    background: #ffffff; 
} 
.btn--previous, 
.btn--next, 
.btn--buy, 
.btn--all, 
.btn--recommend, 
.btn--option { 
    text-transform: uppercase; 
    border-radius: 3px; 
    font-family: "Roboto", sans-serif; 
    font-size: 1.4rem; 
    font-weight: 700 !default; 
} 
.btn--previous, 
.btn--next { 
    display: inline; 
    margin-right: 30px; 
    min-width: 225px; 
    text-align: center; 
} 
.btn--all, 
.btn--recommend, 
.btn--option { 
    border: 1px solid #aaaaaa; 
} 
.btn--previous { 
    color: #c62828; 
    border: 1px solid #c62828; 
} 
.btn--previous .fa-long-arrow-left { 
    color: #c62828; 
} 
.btn--all, 
.btn--recommend, 
.btn--option { 
    font-weight: 400; 
    text-transform: none; 
    color: #212121; 
    display: inline-block; 
    margin-right: 30px; 
    min-width: 225px; 
    min-height: 75px; 
    border-bottom: 2px solid #aaaaaa; 
} 
.btn--all, 
.btn--recommend { 
    background: #c62828; 
    border: none; 
    color: #fff; 
    font-weight: 700; 
    text-align: center; 
} 
.btn--all:hover, 
.btn--recommend:hover { 
    background: #990000; 
    border: none; 
} 
.btn--option { 
    text-align: left; 
    padding-left: 30px; 
    min-width: 260px; 
    min-height: 75px; 
    font-size: 1.6rem; 
} 
.btn--option.is-selected { 
    border: 2px solid #c62828; 
    color: #c62828; 
} 
.btn--option .fa-check { 
    color: #c62828; 
    float: right; 
    position: relative; 
    right: -40px; 
    top: -1px; 
} 
.btn--option .fa-check.is-grey { 
    color: #e7e7e7; 
} 
.btn--option .fa-check.is-red { 
    color: #c62828; 
} 
.btn--sidebar { 
    font-weight: 400; 
    text-transform: none; 
    margin: 0; 
    font-size: 1.6rem; 
    padding-left: 15px; 
    font-family: "Roboto"; 
    background: transparent; 
    color: #212121; 
    margin-top: 15px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
.btn--sidebar:hover { 
    color: #aaaaaa; 
    color: #ccc; 
} 
.btn--next, 
.btn--buy { 
    color: #ffffff; 
    border: none; 
    background: #c62828; 
} 
.btn--buy { 
    margin: 0; 
    width: 100%; 
    text-align: center; 
    margin-top: 15px; 
    text-decoration: none; 
} 
.btn--buy:visited { 
    text-decoration: none; 
} 
.btn--view { 
    border: none; 
    margin-bottom: 0; 
} 
.btn--view:hover { 
    color: #212121; 
} 
.btn--next { 
    border-bottom: 2px solid #990000; 
} 
.btn--next:hover { 
    background: #990000; 
    transition: 0.2s; 
} 
/* Custom query */ 
@media (max-width: 1250px) { 
    .button__group { 
    width: 80%; 
    } 
    .button__group.group--quarter { 
    width: 70%; 
    } 
} 
/* Large devices */ 
@media (max-width: 1200px) { 
    .button__group { 
    width: 90%; 
    } 
} 
/* Large devices */ 
@media (max-width: 1024px) { 
    .button__group { 
    width: 100%; 
    } 
    .button__group.group--quarter { 
    width: 85%; 
    } 
} 
/* Medium devices */ 
@media (max-width: 768px) { 
    .button__group { 
    width: 100%; 
    } 
    .button__group.group--quarter { 
    width: 100%; 
    } 
} 
/* Medium devices */ 
/* Small devices */ 
@media (max-width: 480px) { 
    .btn--option { 
    min-width: 275px; 
    } 
    .btn--all, 
    .btn--recommend { 
    min-width: 275px; 
    } 
} 


/*---------------------------------- 
LIST 
----------------------------------*/ 
ul { 
    padding: 0; 
} 
ul li { 
    display: inline-block; 
    margin-right: 15px; 
    text-align: center; 
} 
.panel { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.panel.is-hidden { 
    display: none; 
} 
.panel__progress { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 
.panel__circle { 
    width: 50px; 
    height: 50px; 
    margin: 0 auto; 
    padding: 15px; 
    border: 1px solid #aaaaaa; 
    border-radius: 50%; 
    font-size: 1.6rem; 
    font-weight: 300 !default; 
} 
.panel__circle.is-selected { 
    color: #ffffff; 
    border: none; 
    background: #c62828; 
} 
.panel__circle.is-completed { 
    border: 1px solid #c62828; 
} 
.panel__circle.is-completed .fa-check { 
    color: #c62828; 
} 
.panel__text { 
    font-family: "Roboto", sans-serif; 
    font-size: 1.4rem; 
} 
.panel__number { 
    position: relative; 
    top: -22px; 
} 
.panel__number.is-hidden { 
    display: none; 
} 
.panel__pick { 
    padding: 15px; 
    text-align: center; 
} 
.panel__title { 
    font-family: "Merriweather"; 
    font-weight: 900; 
    text-transform: none; 
    margin-top: 30px; 
    font-size: 4rem; 
} 
.panel__instructions { 
    text-align: center; 
    font-weight: 400; 
    font-family: "Open Sans"; 
    font-size: 1.8rem; 
    color: #aaaaaa; 
    margin: 0; 
    margin-top: 15px; 
    margin-bottom: 30px; 
} 
/* Large devices */ 
/* Large devices */ 
/* Custom query */ 
@media (max-width: 875px) { 
    .panel__title { 
    width: 80%; 
    margin: auto; 
    margin-top: 30px; 
    } 
} 
/* Medium devices */ 
/* Medium devices */ 
@media (max-width: 640px) { 
    .panel__circle, 
    .panel__text { 
    display: none; 
    } 
} 
/* Small devices */ 
@media (max-width: 480px) { 
    .panel__title { 
    font-size: 3.5rem; 
    } 
}

источник

2016-11-18 Andrew Nguyen

+10

Вы должны реально смотреть на на СУХОЙ принципе - вы можете массово уменьшить свой код JS –

@RoryMcCrossan Да, я знаю, есть повторность. Я надеюсь исправить мою проблему и уменьшить мой код. У вас есть какие-нибудь рекомендации? –

См. [Mcve] с акцентом на минимальном – j08691

использование комбинации перехода и видимость в CSS

.element { 
 
    visibility:hidden; 
 
    opacity:0; 
 
    transition:opacity 0.5s linear; 
 
} 
 
.element.is-selected { 
 
    visibility:visible; 
 
    opacity:1; 
 
}

источник

2016-11-26 18:50:31

Предотвращения Apperance прыжков при выцветании элементов внутри и вне

Objective

Codepen: http://codepen.io/onlyandrewn/pen/NbdGrg

Проблема

index.html

app.css

ответ

Смежные вопросы