[英]JQuery Slide in on Div.Show
I'd like to preface this with the fact that I am very very new to JavaScript and JQuery. 我想以我对JavaScript和JQuery非常陌生的事实作为开头。 I have a moderate amount of CSS and HTML knowledge however.
我对CSS和HTML有一定的了解。
I have managed to create a set of DIV's which get shown in lots of four, and then hide again on button clicks. 我设法创建了一组DIV,每组显示四个,然后在单击按钮时再次隐藏。 My JavaScript is:
我的JavaScript是:
function Show() {
$('div:hidden').slice(0, 4).show();
$('#hide').show();
}
function Hide() {
$('.block').hide();
$('.block:lt(4)').show();
$('#hide').hide();
}
However the next thing I want, and herein lies my question, is to make the next four slide(down) in, instead of pop. 但是,我想做的下一个问题是,使下四个幻灯片(向下)插入,而不是弹出。 I have googled, and overflowed, I even binged!
我用谷歌搜索,并溢出了,我甚至不知所措! And unfortunately I cant see a way to do this in a way that my beginner JavaScript/Query mind understands enough to modify.
不幸的是,我看不到一种以我的初学者JavaScript / Query头脑所能理解的方式进行修改的方法。
Would appreciate any help, tips, or nudges in the right direction! 希望您能向正确的方向提供帮助,技巧或微调!
The answer is in your question. 答案就在您的问题上。 There is a jquery animation called slideDown(to show) and one slideUp(to hide).
有一个jquery动画,名为slideDown(显示)和一个slideUp(隐藏)。 See http://api.jquery.com/slidedown/
请参阅http://api.jquery.com/slidedown/
Instead of show() and hide(), simply use slideDown() and slideUp() and your divs will slide. 不用show()和hide(),只需使用slideDown()和slideUp(),您的div就会滑动。 Like this:
像这样:
function Show() {
$('div:hidden').slice(0, 4).slideDown();
$('#hide').show();
}
function Hide() {
$('.block:gt(3)').slideUp();
$('#hide').slideUp();
}
fiddle: https://jsfiddle.net/ydLgssnf/1/ 小提琴: https : //jsfiddle.net/ydLgssnf/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.