Jquery中的的简单动画效果
主要内容:
1. 显示和隐藏没有动画的元素
2. 利用核心jQuery动画使元素 显示和隐藏
3. 内建效果
最初理解:目前绝大多数网站都以绚丽多彩的界面,吸引用户的眼球,那么这些神奇的效果’我们’,又该如何去一探究竟呢?
之前学习的知识那些单一的效果,都是一闪而过,列如show(),hide(),display:none 等等.这些语法看虽简单,可是怎么简单的东西你会去学习吗?
$("div").hide().addClass("fun");
<div style="display: none">This will statrt hidden</div>
<div style="display: none" class="fun">This will statrt hidden</div>
<div style="display: none" class="fun">This will statrt hidden</div>
<div>This will start show</div>
结果运行:显示最底下一行,因为在初始时将Style属性的display值设为none 而是元素show()命令后,又而display值总被设为block.
可折叠列表:
众所周知计算机的文件分布曾倒树状,不可能一下全部显示在界面上,这样用户…… 所以就有了”渐进式公开”原则
<legend>Collapsible List — Take 1</legend>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3.1</li>
<li>
Item 3.2
<ul>
<li>Item 3.2.1</li>
<li>Item 3.2.2</li>
<li>Item 3.2.3</li>
</ul>
</li>
<li>Item 3.3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Item 4.1</li>
<li>
Item 4.2
<ul>
<li>Item 4.2.1</li>
<li>Item 4.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Item 5</li>
</ul>
运行如图:
这样的界面肯定不行,文件过多那该怎么办,考虑折叠
$(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image','url(minus.gif)')
.children().show();
}
else {
$(this)
.css('list-style-image','url(plus.gif)')
.children().hide();
}
}
return false;
})
.css('cursor','pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
真正的产生动画效果:toggle(speed,callback),在任何隐藏包装下执行show(),并且在任何非隐藏的包装元素下执行hide(),speed.指定时间callback,动画完成时调用
元素的淡入和淡出,fadeout fadeout(speed,callback) 将非隐藏的任何已匹配的元素的不透明度降低到百分之0
FadeTo(speed,opacity,callback) Opacity 指定元素调整的目标不透明度
元素的滑上和滑下slideDown()和slideup(),其效果和hide(),show()相似
SlideDown(speed,callback) 通过从上往下逐渐扩大元素的垂直面积,使隐藏的任何已匹配的元素显示出来,不是隐藏的没事.
SlideToggle(speed,callback)在隐藏的任何已包装的元素执行slideDown(),同事在非隐藏的时候执行sildeup(),
动画停止:stop()停止当前正在运行的动画
9982
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
