昨天突然有網友問我animate()方法可以來操作所有css屬性嗎?是的,我告訴他可以的。不過,在此有需要注意點需要大家搞清楚:當使用 animate()時,必須使用 Camel 標記法書寫所有的屬性名,比如,必須使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等。
css中的不是所有屬性都可以用Jquery動畫(animate函數)來動態改變,下面總結了JQ可以操作元素的一些屬性:
* 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
記住這些可以玩動畫的哦~~
jquery的animate()方法也可設置非css屬性
如題,舉例:
$('body').animate({scrollTop:0}, 1500);$("body").animate({scrollTop:"-="+50},350);
還有其他的幾個小例子:
禁用元素:
$('button').attr('disabled', 'disabled'); $('button').removeAttr('disabled');
遍歷元素集合:
$("input:text").each(function(index){ alert(index);//循環的下標值,從0開始 alert(this.value);//自帶屬性可以用this(Dom)直接取值 alert($(this).attr("type"));//自定義屬性需要用attr()取值 });
新聞熱點
疑難解答