JQ/JS 渐变淡出显示和渐变淡入隐藏，animate().css() 如何执行？

Question

JQ/JS 渐变淡出显示和渐变淡入隐藏，animate().css() 如何执行？

Answer 1

• 我不知道是要它们同时进行还是先移动过去再隐藏，2个；

• 第一个是先移动后隐藏

• $(function(){

• $("div").animate({ left:"100",opacity:1},1000,function(){

• $(this).css({display:"none"})

• })

• })

• 第2个是移动过去的同时隐藏

• $(function(){

• $("div").animate({ left:"100",opacity:1},1000)

• })

js和jq的主要区别

• js是基础，jq是建立在js的基础上，用js开发出来的一个框架，里面实现和很多常用的功能和效果。只要了解其中方法的含义，我们使用的时候直接调用就可以了。

Answer 2

因为animate有个duration，默认是400ms。

如下的写法就是你要的效果了
.animate({ left:"100,opacity:1"},400,function(){
$(this).css("display:block")
});

Answer 3

animate函数不支持 display 属性，只支持下列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
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent