一.浏览器的布局引擎:
负责解释HTML和CSS代码,并在浏览器的窗口里显示(视窗就是为访问者显示内容的窗口)
Google和apple的safari都用的webkit浏览器布局引擎。
Firefox使用gecko布局引擎
Microsoft Internet explorer 用的trident.
二.淡入淡出效果。
hide(),show(),toggle().动态改变CSS属性,让页面的变化就在用户的眼前发生。
fadeIn();将CSS从opacity从0改为100.
fadeTo();将元素改为某个特定的透明度百分比。
fadeOut();将元素改为透明度从100到0.
slideUp();将元素向上滑动。
slideDown();将元素向下滑动
slideToggle();自动改变向上向下滑动。滑动改变的是height属性改为0的时候就相当于display:none;
串链结合效果 $("#box").fadeIn().fadeOut();
三.animate完成DIY效果(jQuery动画)
animate适合于改变的css属性:
* backgroundPosition
* borderWidth
* borderBottomWidth
* borderLeftWidth
* borderRightWidth
* borderTopWidth
* borderSpacing
* margin
* marginBottom
* marginLeft
* marginRight
* marginTop
* outlineWidth
* padding
* paddingBottom
* paddingLeft
* paddingRight
* paddingTop
* height
* width
* maxHeight
* maxWidth
* minHeight
* maxWidth
* font
* fontSize(在animate函数的css参数指定并不同于标准css属性,例如这个css标准是:font-size。同理上面很多也是这样的情况)
* bottom
* left
* right
* top
* letterSpacing
* wordSpacing
* lineHeight
* textIndent
* opacity
$('#box').animate({left:"500px"},1000).animate({left:"0px"},1000);//第一个参数是css属性,第二个参数是时间限制(可选)。
例如上面的代码可以完成的操作就是将id为box的div从left=0的位置(原来是0,预设的),先移动到left等于500的位置再移动到left等于0的位置。
而且还可以改多个属性:$('#box').animate({left:"500px",width:"200px",height:"500px"},1000).animate({left:"0px"},1000);
这是一个需要自己想象力去改造和利用的强大的工具函数,贼棒!!!!(这里的css属性要使用DOM标准设置,而不是css标准)。
关闭动画效果:$.fx.off=true; 还有jQuery的stop方法