使元素显示和隐藏
showhide
$('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();k
}
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'
});
2.切换元素的显示状态
toggle
可以切换显示和隐藏状态,替代show和hide
以动画方式使函数显示和隐藏
1.使元素逐渐地显示和隐藏hide show和toggle
都可以有相应的效果,加入参数(speed,callback)
其中speed可以是数字,也可以是slow,fast等字符串
fadeIn(speed,callback)
fadeOut(speed,callback)
fadeTo(speed,opacity,callback)
slideDown(speed,callback)
展现
slideUp(speed,callback)
收起 display:none
slideToggle(speed,callback)
stop()
创建自定义的动画
1.animate(properties,duration,easing,callback)animate(properties,options)
properties:指定动画结束时候,CSS样式应该到达的最终值。从当前值到最终值的过度调整而产生动画。
duration:slow normal fast或者是数字
easing:用来实现动画的缓和效果。
callback:动画完成时调用的函数 this
$('#scaleButton').click(function(){
$('#testSubject').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
'slow'
);
});
});
$('#dropButton').click(function(){
$('#testSubject').each(function(){
$(this)
.css('position','relative')
.animate(
{
opacity: 'hide',
top: $(window).height() - $(this).height() -
$(this).position().top
},
'slow',
function(){ $(this).hide(); });
});
});
$('#puffButton').click(function(){
$('#testSubject').each(function(){
var position = $(this).position();
$(this)
.css({position:'absolute',top:position.top,
left:position.left})
.animate(
{
opacity: 'hide',
width: $(this).width() * 5,
height: $(this).height() * 5,
top: position.top - ($(this).height() * 5 / 2),
left: position.left - ($(this).width() * 5 / 2)
},
'normal');
});
});