Добавить анимацию появляющихся блоков в готовую функции "Показать еще"

Question

Есть функция показа дополнительных блоков "Показать еще". В ней работает display:none; и display:block; . Как реализовать, что бы новые блоки появлялись с анимацией в 1s? Знаю что можно в css сделать через overflow и opacity, но может есть вариант просто дописать скрипт?

$(function(){
    $show = 4;
    $articles = $("#newsblock>.news");
    
    
    $update = function()
    {
        $vis = 0;
        $pos = 0;
        $articles.each(function(ind,obj)
        {
            $pos++;
            $(this).css({"display":($pos>$show)?'none':'block'});
                       
            if ($pos<=$show) { $vis++; }
        });
        
        if ($vis == $articles.length)
        {
            $("#btnMore").css({"display":"none"});   
        }
    };

    $update();
    
    $btnMore = $("<div />").attr({"id":"btnMore"});
    $btnMore.html("Show more");
    $btnMore.click(function()
    {
        $show = $show + 2;
        $update();
    });
    
    $("body").append($btnMore);
    
});

#btnMore {
    width: 100px;
     font-family: Arial, Helvetica;
    border: 2px solid #ccc;
    background: #eee;
    border-radius:10px;
    margin: 10px 10px 0;
    padding: 10px;
    text-align:center;
    cursor:pointer;
}

#newsblock>.news {
     font-family: Arial, Helvetica;
    border: 2px solid #ccc;
    background: #eee;
    border-radius:10px;
    margin: 10px 10px 0;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="newsblock">
<div class="news" data-id="1">Lorem Ipsum blah blah</div>
<div class="news" data-id="2">Lorem Ipsum blah blah</div>
<div class="news" data-id="3">Lorem Ipsum blah blah</div>
<div class="news" data-id="4">Lorem Ipsum blah blah</div>
<div class="news" data-id="5">Lorem Ipsum blah blah</div>
<div class="news" data-id="6">Lorem Ipsum blah blah</div>
<div class="news" data-id="7">Lorem Ipsum blah blah</div>
<div class="news" data-id="8">Lorem Ipsum blah blah</div>
<div class="news" data-id="9">Lorem Ipsum blah blah</div>
<div class="news" data-id="10">Lorem Ipsum blah blah</div>
</div>

Answer 1

Можно анимировать через CSS Transition.

$(function() {
  let show = 4;
  let $articles = $("#newsblock>.news");
  let $btnMore = $("#btnMore");

  let update = function() {
    let pos = 0;

    $articles.each(function(ind, obj) {
      pos++;

      if (pos <= show) {
        $(this).addClass('show');
      } else {
        $(this).removeClass('show');
      }
    });

    if (show >= $articles.length) {
      $btnMore.hide();
    }
  };

  update();

  $btnMore.click(function() {
    show += 2;
    update();
  });

});

#btnMore {
  width: 100px;
  font-family: Arial, Helvetica;
  border: 2px solid #ccc;
  background: #eee;
  border-radius: 10px;
  margin: 10px 10px 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

#newsblock>.news {
  font-family: Arial, Helvetica;
  border: 2px solid #ccc;
  background: #eee;
  border-radius: 10px;
  opacity: 0;
  transition: opacity ease 1s;
  height: 0;
  overflow: hidden;
}

#newsblock>.news.show {
  opacity: 1;
  display: block;
  height: auto;
  margin: 10px 10px 0;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="newsblock">
  <div class="news" data-id="1">Lorem Ipsum blah blah</div>
  <div class="news" data-id="2">Lorem Ipsum blah blah</div>
  <div class="news" data-id="3">Lorem Ipsum blah blah</div>
  <div class="news" data-id="4">Lorem Ipsum blah blah</div>
  <div class="news" data-id="5">Lorem Ipsum blah blah</div>
  <div class="news" data-id="6">Lorem Ipsum blah blah</div>
  <div class="news" data-id="7">Lorem Ipsum blah blah</div>
  <div class="news" data-id="8">Lorem Ipsum blah blah</div>
  <div class="news" data-id="9">Lorem Ipsum blah blah</div>
  <div class="news" data-id="10">Lorem Ipsum blah blah</div>
</div>

<button id="btnMore">Show more</button>

Ваш код немного подправил, чтобы некоторые ошибки исправить.

Answer 2

$(function() {
  $show = 4;
  $articles = $("#newsblock>.news");
  $update = function() {
    $vis = 0;
    $pos = 0;
    $articles.each(function(ind, obj) {
      $pos++;
      if ($pos > $show) {
        $(this).hide()
      } else {
        $(this).show(1000)
      }
      if ($pos <= $show) {
        $vis++;
      }
    });
    if ($vis == $articles.length) {
      $("#btnMore").css({
        "display": "none"
      });
    }
  };
  $update();
  $btnMore = $("<div />").attr({
    "id": "btnMore"
  });
  $btnMore.html("Show more");
  $btnMore.click(function() {
    $show = $show + 2;
    $update();
  });
  $("body").append($btnMore);
});

#btnMore {
  width: 100px;
  font-family: Arial, Helvetica;
  border: 2px solid #ccc;
  background: #eee;
  border-radius: 10px;
  margin: 10px 10px 0;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

#newsblock>.news {
  font-family: Arial, Helvetica;
  border: 2px solid #ccc;
  background: #eee;
  border-radius: 10px;
  margin: 10px 10px 0;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="newsblock">
  <div class="news" data-id="1">Lorem Ipsum blah blah</div>
  <div class="news" data-id="2">Lorem Ipsum blah blah</div>
  <div class="news" data-id="3">Lorem Ipsum blah blah</div>
  <div class="news" data-id="4">Lorem Ipsum blah blah</div>
  <div class="news" data-id="5">Lorem Ipsum blah blah</div>
  <div class="news" data-id="6">Lorem Ipsum blah blah</div>
  <div class="news" data-id="7">Lorem Ipsum blah blah</div>
  <div class="news" data-id="8">Lorem Ipsum blah blah</div>
  <div class="news" data-id="9">Lorem Ipsum blah blah</div>
  <div class="news" data-id="10">Lorem Ipsum blah blah</div>
</div>

БЛОГ НА HUSL

Добавить анимацию появляющихся блоков в готовую функции "Показать еще"

Ответы (2 шт):