目的
>使文本是唯一淡入淡出的东西,而持有文本的容器具有固定的高度以消除文本跳跃的外观
>删除scripts.js中的所有代码重复,尤其是所有let语句
Codepen:http://codepen.io/onlyandrewn/pen/NbdGrg
问题
我有一系列面板,按下btn按钮 – 上一个或btn – 接下来你会看到系列中的下一个面板.panel – one,.panel – two,旧的淡出淡出新的但是,当文本中的淡入淡出元素出现跳跃时.
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--option { border: 1px solid #aaaaaa; } .btn--prevIoUs { color: #c62828; border: 1px solid #c62828; } .btn--prevIoUs .fa-long-arrow-left { color: #c62828; } .btn--all,.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; } }
解决方法
在CSS中使用转换和可见性的组合
.element { visibility:hidden; opacity:0; transition:opacity 0.5s linear; } .element.is-selected { visibility:visible; opacity:1; }