0

Всем привет. Не могу понять как сделать так чтобы элементы появлялись одновременно или чтобы один появлялся позже другого. У меня треугольник появляется раньше чем окно со списком. Я пытался сделать ему скорость другую, но он почему-то стал медленно исчезать, а не появляться. Может кто подсказать как сделать параллельную загрузку или хотя бы сделать появление треугольника медленнее? спасибо

$(document).on('click', ".repair_item", function() {
			var height = parseInt($(this).find(".repair_item_hiddenList").css('height'));
			var $list =  $(this).find(".repair_item_hiddenList");
			var $others = $('.repair_item_hiddenList');
			$(".repair_item_text_js").hide('repair_item_text_js');
			var cssValues = {
			    "margin-left":"15px"
			}
			$('.repair_item').css('margin-bottom', '30px');
			$others.hide();
			$list.css(cssValues);
			$list.slideDown('slow');
			$(this).find(".repair_item_text_js").slideDown('slow');
		});
.flex {
  display:flex;
}
.repair_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
   flex-wrap: wrap;
}
.repair_item {
  width: 300px;
  height: 140px;
  margin-bottom: 30px;
}
.repair_item:hover {
  cursor: pointer;
}
.repair_item_flex {
  height: 100%;
  display: flex;
  align-items: flex-start;
}
.repair_item_text {
  width: 50%;
  height: 100%;
  background-color: #37acfb;
  color: white;
  font-size: 15px;
  font-family: "Roboto Consendered Bold";
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  position: relative;
}
.repair_item_text_text {
  text-align: center;
}
.repair_item_text_js {
  display: none;
  content: ''; 
  position: absolute; 
  border: 10px solid transparent;
  border-bottom: 20px solid #212121;
  bottom: -30px;
  left: 50%;
   transform: translate(-20px);
}
.repair_item_hiddenList {
  display: none;
  background-color: #252525;
  color: white;
  padding: 25px 30px 20px;
  left: 0px;
  margin-top: 30px;
  position: absolute;
  cursor: auto;
}
.repair_item_hiddenList_title {
  font-size: 17px;
}
.repair_item_hiddenList_list {
  list-style: none;
  padding-left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.repair_item_hiddenList_list li {
  font-size: 15px;
  display: block;
  width: 300px;
  margin-bottom: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'flex'>
<div class = "repair_item">
          <div class = "repair_item_flex">      
            <div class = "repair_item_text">
              <div class = "repair_item_text_text">текст</div>
              <div class = "repair_item_text_js"></div>
            </div>
          </div>
          <div class = "repair_item_hiddenList">
            <p class = "repair_item_hiddenList_title">Что мы можем сделать</p>
            <ul class = "repair_item_hiddenList_list">
               <li>элемент списка1</li>
               <li>элемент списка2</li>
               <li>элемент списка3</li>
               <li>элемент списка4</li>
              </ul>
          </div>  
        </div>
        <div class = "repair_item">
          <div class = "repair_item_flex">      
            <div class = "repair_item_text">
              <div class = "repair_item_text_text">текст</div>
              <div class = "repair_item_text_js"></div>
            </div>
          </div>
          <div class = "repair_item_hiddenList">
            <p class = "repair_item_hiddenList_title">Что мы можем сделать</p>
            <ul class = "repair_item_hiddenList_list">
               <li>элемент списка1</li>
               <li>элемент списка2</li>
               <li>элемент списка3</li>
               <li>элемент списка4</li>
              </ul>
          </div>  
        </div>
        </div>

4
  • надо бы треугольник перенести в repair-item-hiddenList? чтобы не задавать ему отдельную анимацию.. 22 дек 2017 в 14:26
  • тогда он будет появляться в одном месте постоянно. у меня этих блоков с названием текст много и они будут по 3 штуки на максимальной ширине экрана и надо чтобы треугольник выходил из того лока по которому кликнули 22 дек 2017 в 14:50
  • @HamSter в вашем примере на втором блоке нет треугольника, точнее он под первым блоком появляется 22 дек 2017 в 15:13
  • jsbin.com/niqikay/edit?js,output
    – SVE
    22 дек 2017 в 15:34

1 ответ 1

0

Как вариант - просто появление треугольника задавать через секунду после появления окна с информацией. Сделать это можно с помощью SetTimeout Простой пример использования, через секунду после запуска выводит окно с текстом "Привет":

function func() {
  alert( 'Привет' );
}

setTimeout(func, 1000);

Ваш ответ

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

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