Как сделать чтобы при появлении слайдер толкнул кнопку вниз

226
13 июня 2018, 07:10

Есть блок по 5 картинками и описанием.

Под этим блоком есть кнопка в которую если нажмете то внизу появляется плавно дополнительно еще такой блок.Как сделать чтобы при появлении этого блока он толкал кнопку вниз .То есть таких блоков может быть 500 и будут они появлятсья по 5 а кнопка всегда должна быть внизу

Помогите пожалуйста

Посмотрите на полную ширину чтобы понять суть вопроса а то в маленьких экранах не очень .

//  
var b = $('body'); 
var isToggled = false; // 
var origTextStr = b.find('button').text(); 
 
$(document).on('click', 'button', function(){ 
	 
	var t = $(this), 
			next = t.nextAll('.group:first'), 
			nextObj = t.nextAll('.design_block'); 
	 
	// изменить текст кнопки при клике на него 
	if( !isToggled ) { t.text('Hide more'); } else { t.text(origTextStr); } 
	 
	//взять высоту блока 
	var nextHeight = next.height() + 'px'; 
	 
	// добавить трансформ на  'next' 
	if( !isToggled ){ 
		nextObj.css('transform', 'translateY('+ nextHeight +')'); 
		next.addClass('on'); 
		//добавить класс  ('on'); 
		isToggled = true; 
	} 
	else { 
		nextObj.css('transform','translateY(0)'); 
		next.removeClass('on'); 
		isToggled = false; 
	} 
	 
});
body.on { 
  overflow: hidden; 
} 
 
.our_works { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  width: 100%; 
  overflow: hidden; 
} 
.our_works .design_block { 
  width: 210px; 
  margin-bottom: 20px; 
  overflow: hidden; 
  backface-visibility: hidden; 
} 
.our_works .architecture_img { 
  width: 210px; 
  height: 198px; 
} 
.our_works .more_posts { 
  margin-top: 15px; 
  border-radius: 2px; 
  background-color: #2a323d; 
  padding: 12px 0 13px 0; 
  color: #fff; 
  width: 200px; 
  border: none; 
  margin: 0 auto; 
} 
.our_works .more_posts a { 
  color: #fff; 
} 
.our_works .more_posts a:hover { 
  text-decoration: none; 
} 
 
.group { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
} 
.group .design_block { 
  opacity: 0; 
  transform: translateY(100px); 
  visibility: hidden; 
} 
.group .design_block:nth-child(1) { 
  transition-delay: 0.1s; 
} 
.group .design_block:nth-child(2) { 
  transition-delay: 0.15s; 
} 
 
.group.on .design_block { 
  opacity: 1; 
  transform: translateY(0); 
  visibility: visible; 
} 
 
.design_block { 
  transform: translateY(0); 
  transition: all 1s cubic-bezier(0.4, 0, 0, 1); 
  width: 100%; 
  z-index: 1; 
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row"> 
    <div class="our_works"> 
       
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE</h6> 
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
      </div> 
 
 
      <!-- Button goes here --> 
      <button class="more_posts"> 
        <a href="javascript:void(0)">More</a> 
      </button> 
       
      <!-- hidden blocks --> 
    <div class="group"> 
       
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE</h6> 
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
      </div> 
 </div> 
       
    </div> 
  </div> 
</div>

Answer 1

Как было сказано, кнопку лучше всего вынести за пределы блока .our_works. Тогда она вегда будет снизу, в независимости от количества блоков.

Пример.

//  
var b = $('body'); 
var isToggled = false; // 
var origTextStr = b.find('button').text(); 
 
$(document).on('click', 'button', function() { 
 
  var t = $(this), 
    next = $('.our_works .group:not(.on):first'); 
 
  //взять высоту блока 
  var nextHeight = 340; // Здесь надо вычислить высоту блока. Пока что хард кодом забьем 
 
  next.addClass('on'); 
  next.height(nextHeight); 
 
  if (!$('.our_works .group:not(.on):first').length) { //Больше блоков на показ нету 
    t.hide("hide_opacity"); 
  } 
 
});
body.on { 
  overflow: hidden; 
} 
 
.our_works { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  width: 100%; 
  overflow: hidden; 
} 
 
.our_works .design_block { 
  width: 210px; 
  margin-bottom: 20px; 
  overflow: hidden; 
  backface-visibility: hidden; 
} 
 
.our_works .architecture_img { 
  width: 210px; 
  height: 198px; 
} 
 
.more_posts { 
  margin-top: 15px; 
  border-radius: 2px; 
  background-color: #2a323d; 
  padding: 12px 0 13px 0; 
  color: #fff; 
  width: 200px; 
  border: none; 
  margin: 0 auto; 
  transition: opacity 1s cubic-bezier(0.4, 0, 0, 1); 
} 
 
.more_posts a { 
  color: #fff; 
} 
 
.more_posts a:hover { 
  text-decoration: none; 
} 
 
.group { 
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  overflow: hidden; 
  height: 0; 
  transition: height 1s cubic-bezier(0.4, 0, 0, 1); 
} 
 
.group .design_block { 
  opacity: 0; 
  transform: translateY(100px); 
} 
 
.group .design_block:nth-child(1) { 
  transition-delay: 0.1s; 
} 
 
.group .design_block:nth-child(2) { 
  transition-delay: 0.15s; 
} 
 
.group.on .design_block { 
  opacity: 1; 
  transform: translateY(0); 
} 
 
.design_block { 
  transform: translateY(0); 
  transition: all 1s cubic-bezier(0.4, 0, 0, 1); 
  width: 100%; 
  z-index: 1; 
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row"> 
    <div class="our_works"> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
        <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">ARCHITECTURE</h6> 
        <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY HOMES</h6> 
        <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
      </div> 
 
      <div class="design_block"> 
        <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
        <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
        <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
      </div> 
 
 
 
 
      <!-- hidden blocks --> 
      <div class="group"> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
          <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE</h6> 
          <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
          <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
        </div> 
      </div> 
      <!-- hidden blocks --> 
      <div class="group"> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
          <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE</h6> 
          <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
          <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
        </div> 
      </div> 
      <!-- hidden blocks --> 
      <div class="group"> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
          <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE</h6> 
          <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
          <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
        </div> 
      </div> 
      <!-- hidden blocks --> 
      <div class="group"> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE + DESIGN</h6> 
          <div class="preview_design_block">Faye Toogood Gives This Mediterranean Vacation Home a Total Makeover</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">ARCHITECTURE</h6> 
          <div class="preview_design_block">How This Derelict Paris District Transformed Into the Start-Up Capital of France</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY HOMES</h6> 
          <div class="preview_design_block">Leonardo DiCaprio Just Bought Moby's Los Feliz House—But He May Never Even Live in It</div> 
        </div> 
 
        <div class="design_block"> 
          <img src="http://architectureimg.com/wp-content/uploads/2017/06/ancient-watermill-trees-cascades-stones-creek-nature-free-download-wallpaper-1920x1080.jpg" alt="" class="architecture_img"> 
          <h6 class="design_block_title">CELEBRITY LIFESTYLE</h6> 
          <div class="preview_design_block">This Charming Welsh Cottage Is Only Accessible by Steam Train</div> 
        </div> 
      </div> 
 
    </div> 
    <!-- Button goes here --> 
    <button class="more_posts"> 
        <a href="javascript:void(0)">More</a> 
      </button> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте seo-kiev.com.ua
ТОП-10
READ ALSO
visual studio Откатить публикацию
c#

visual studio Откатить публикацию

Я опубликовал новую версию проекта, нажав кнопку "Опубликовать"(Web deploy)Но сайт отказался запускаться с ошибкой 502

 252
Как реализовать скил &ldquo;Poison&rdquo; ? Unity C#
c#

Как реализовать скил “Poison” ? Unity C#

Есть абстрактный класс Creature от которого наследуются два класса: Rogue, Goblin(в этих классах пара скиллов и статы)Есть класс Fight(в нем реализован...

 247
Binding метода с параметрами на условиях
c#

Binding метода с параметрами на условиях

Вот хотелось упростить код не много и у меня есть вот такой код XAML

 231
Авторизация и парсинг сайта с ajax
c#

Авторизация и парсинг сайта с ajax

Всем привет!

 246