隐藏/显示
$(‘div’).hide();隐藏
$(‘div’).show();显示
$(‘div’).toggle();切换
淡入淡出
$(div).fadeIn(speed,callback);淡入
$(div).fadeOut(speed,callback);淡出
$(div).fadeToggle(speed,callback);淡入淡出切换;
$(div).fadeTo(speed,opacity,callback);渐变为给定的不透明度
滑动
$(div).slideDown(speed,callback);向下滑动
$(div).slideUp(speed,callback);向上滑动
$(div).slideToggle(speed,callback);滑动之间切换
动画
$(div).animate({params},speed,callback);
可以使用相对值:
$(div).animate({
left:’200px’,
height: ‘+=150px’,
});
只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)
队列功能:多个不同的动画会按照队列顺序执行;
$(div).stop()用于动画或效果完成前对它们进行停止;
tab切换
<ul> <li class=”a”>首页</li> <li >那啥</li> <li >那啥啥</li> </ul> <div class=”b”> <div class=”a”>123</div> <div>456</div> <div>789</div> </div> css .b div{ display: none; width: 100px; height: 100px; border: 1px solid #000; } .b div.a{ display: block; } js $(‘li‘).click(function(){ var i=$(this).index() $(this).addClass(‘a‘).siblings().removeClass(‘a‘); $(‘.b div‘).eq(i).addClass(“a”).siblings().removeClass(‘a‘) }