jQuery在Div.Show上滑动

Question

我想以我对JavaScript和JQuery非常陌生的事实作为开头。 我对CSS和HTML有一定的了解。

我设法创建了一组DIV，每组显示四个，然后在单击按钮时再次隐藏。 我的JavaScript是：

function Show() {
    $('div:hidden').slice(0, 4).show();
    $('#hide').show();
}

function Hide() {
    $('.block').hide();
    $('.block:lt(4)').show();
    $('#hide').hide();
}

小提琴

但是，我想做的下一个问题是，使下四个幻灯片（向下）插入，而不是弹出。 我用谷歌搜索，并溢出了，我甚至不知所措！ 不幸的是，我看不到一种以我的初学者JavaScript / Query头脑所能理解的方式进行修改的方法。

希望您能向正确的方向提供帮助，技巧或微调！

Answer 1

答案就在您的问题上。 有一个jquery动画，名为slideDown（显示）和一个slideUp（隐藏）。 请参阅http://api.jquery.com/slidedown/

不用show（）和hide（），只需使用slideDown（）和slideUp（），您的div就会滑动。 像这样：

function Show() {
    $('div:hidden').slice(0, 4).slideDown();
    $('#hide').show();
}

function Hide() {
    $('.block:gt(3)').slideUp();
  $('#hide').slideUp();
}

小提琴： https : //jsfiddle.net/ydLgssnf/1/