0

Коллеги, подскажите. Обхожу li и ставлю активный класс с увеличение scale 1.2. Но мне требуется, что бы вложенные элементы не увеличивались. Это реально?

Задача: увеличивать только оранжевый прямоугольник.

	function doSetTimeout(i) {
		setTimeout(function() {
			jQuery(".work__item-" + i).addClass("work__item--active");
			jQuery(".work__item-" + i).siblings().removeClass("work__item--active")
		}, i * 1000)
	}
	function myFuncSuper() {
		for (let i = 0; i <= 6; i++) {
			doSetTimeout(i)
		}
	}
	myFuncSuper();
	setInterval(myFuncSuper, 6000);
.work__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 60px;
  padding: 145px 0; }

.work__item {
  position: relative;
  width: 170px;
  height: 48px;
  
  background-color:orange;
  -webkit-transition: .3s;
  transition: .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .work__item--active {
    -webkit-transform: scale(1.2);
            transform: scale(1.2); }
  .work__item-1:after {
    content: "01";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }
  .work__item-2:after {
    content: "02";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }
  .work__item-3:after {
    content: "03";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }
  .work__item-4:after {
    content: "04";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }
  .work__item-5:after {
    content: "05";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }
  .work__item-6:after {
    content: "06";
    font-family: MuseoSansCyrl;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700; }

.work-icon__wrapp {
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 50%;
  border: solid 4px #d9d9d9;
  width: 82px;
  height: 82px;
  background: center center no-repeat; }
  .work-icon__wrapp:after {
    position: absolute;
    font-family: MuseoSansCyrl;
    color: #000000;
    font-size: 16px;
    top: 0;
    left: 90px;
    width: 160px;
    height: 84px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .work-icon__wrapp:before {
    content: "";
    position: absolute;
    display: block;
    top: -60px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 1px;
    height: 55px;
    border-right: 1px dashed #f35c17; }
  .work-icon__wrapp--even {
    top: -140px; }
    .work-icon__wrapp--even:after {
      right: 90px;
      text-align: right;
      left: initial;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; }
    .work-icon__wrapp--even:before {
      top: initial;
      bottom: -60px; }

.work-icon-call {
  background-image: url(../img/Work/call.png); }
  .work-icon-call:after {
    content: "Звонок, предварительное обсуждение проекта и выезд на замеры"; }
.work-icon-contract {
  background-image: url(../img/Work/contract.png); }
  .work-icon-contract:after {
    content: "Составление \a             Тех Задания и подписание договора"; }
.work-icon-management {
  background-image: url(../img/Work/management.png); }
  .work-icon-management:after {
    content: "Работа над эскизной частью проекта, согласование концепции интерьера"; }
.work-icon-sketch {
  background-image: url(../img/Work/sketch.png); }
  .work-icon-sketch:after {
    content: "Выполнение \a             рабочих чертежей, завершение работы над проектом"; }
.work-icon-builder {
  background-image: url(../img/Work/builder.png); }
  .work-icon-builder:after {
    content: "Авторское сопровождение ремонтных работ"; }
.work-icon-couch {
  background-image: url(../img/Work/couch.png); }
  .work-icon-couch:after {
    content: "Комплектация"; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="work__list">
                    <li class="work__item work__item-1">
                        <div class="work-arrow work-arrow-1"></div>
                        <div class="work-icon__wrapp work-icon-call"></div>
                    </li>
                    <li class="work__item work__item-2">
                        <div class="work-arrow work-arrow-2"></div>
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-contract"></div>
                       
                    </li>
                    <li class="work__item work__item-3">
                        <div class="work-arrow work-arrow-3"></div>
                        <div class="work-icon__wrapp work-icon-management"></div>
                    </li>
                    <li class="work__item work__item-4">
                        <div class="work-arrow work-arrow-4"></div>
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-sketch"></div>
                    </li>
                    <li class="work__item work__item-5">
                        <div class="work-arrow work-arrow-5"></div>
                        <div class="work-icon__wrapp work-icon-builder"></div>
                    </li>
                    <li class="work__item work__item-6">
                        <div class="work-arrow work-arrow-6"></div>
                        <div class="work-icon__wrapp work-icon__wrapp--even work-icon-couch"></div>
                    </li>
                </ul>

1 ответ 1

2

Пример

function doSetTimeout(i) {
  setTimeout(function() {
    jQuery(".work__item-" + i).addClass("work__item--active");
    jQuery(".work__item-" + i).siblings().removeClass("work__item--active")
  }, i * 1000)
}

function myFuncSuper() {
  for (let i = 0; i <= 6; i++) {
    doSetTimeout(i)
  }
}
myFuncSuper();
setInterval(myFuncSuper, 6000);
.work__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 60px;
  padding: 145px 0;
}

.work__item {
  position: relative;
  width: 170px;
  height: 48px;
  background-color: orange;
  -webkit-transition: .3s;
  transition: .3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.work__item:before{
   content: '';
   position: absolute; top: 0; left: 0;
   width: 100%;
   height: 100%;
   background-color: orange;
   transition: .3s;
   z-index: -1;
}
.work__item--active:before{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}



.work__item-1:after {
  content: "01";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work__item-2:after {
  content: "02";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work__item-3:after {
  content: "03";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work__item-4:after {
  content: "04";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work__item-5:after {
  content: "05";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work__item-6:after {
  content: "06";
  font-family: MuseoSansCyrl;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.work-icon__wrapp {
  position: absolute;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  border: solid 4px #d9d9d9;
  width: 82px;
  height: 82px;
  background: center center no-repeat;
}

.work-icon__wrapp:after {
  position: absolute;
  font-family: MuseoSansCyrl;
  color: #000000;
  font-size: 16px;
  top: 0;
  left: 90px;
  width: 160px;
  height: 84px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.work-icon__wrapp:before {
  content: "";
  position: absolute;
  display: block;
  top: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1px;
  height: 55px;
  border-right: 1px dashed #f35c17;
}

.work-icon__wrapp--even {
  top: -140px;
}

.work-icon__wrapp--even:after {
  right: 90px;
  text-align: right;
  left: initial;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.work-icon__wrapp--even:before {
  top: initial;
  bottom: -60px;
}

.work-icon-call {
  background-image: url(../img/Work/call.png);
}

.work-icon-call:after {
  content: "Звонок, предварительное обсуждение проекта и выезд на замеры";
}

.work-icon-contract {
  background-image: url(../img/Work/contract.png);
}

.work-icon-contract:after {
  content: "Составление \a             Тех Задания и подписание договора";
}

.work-icon-management {
  background-image: url(../img/Work/management.png);
}

.work-icon-management:after {
  content: "Работа над эскизной частью проекта, согласование концепции интерьера";
}

.work-icon-sketch {
  background-image: url(../img/Work/sketch.png);
}

.work-icon-sketch:after {
  content: "Выполнение \a             рабочих чертежей, завершение работы над проектом";
}

.work-icon-builder {
  background-image: url(../img/Work/builder.png);
}

.work-icon-builder:after {
  content: "Авторское сопровождение ремонтных работ";
}

.work-icon-couch {
  background-image: url(../img/Work/couch.png);
}

.work-icon-couch:after {
  content: "Комплектация";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="work__list">
  <li class="work__item work__item-1">
    <div class="work-arrow work-arrow-1"></div>
    <div class="work-icon__wrapp work-icon-call"></div>
  </li>
  <li class="work__item work__item-2">
    <div class="work-arrow work-arrow-2"></div>
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-contract"></div>

  </li>
  <li class="work__item work__item-3">
    <div class="work-arrow work-arrow-3"></div>
    <div class="work-icon__wrapp work-icon-management"></div>
  </li>
  <li class="work__item work__item-4">
    <div class="work-arrow work-arrow-4"></div>
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-sketch"></div>
  </li>
  <li class="work__item work__item-5">
    <div class="work-arrow work-arrow-5"></div>
    <div class="work-icon__wrapp work-icon-builder"></div>
  </li>
  <li class="work__item work__item-6">
    <div class="work-arrow work-arrow-6"></div>
    <div class="work-icon__wrapp work-icon__wrapp--even work-icon-couch"></div>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.