Question

JQ/JS 渐变淡出显示和渐变淡入隐藏，animate().css() 的执行疑问

在实现这个效果时，采用 选择器.animate({ left:"100,opacity:1"}).css("display:block");

个人理解，在执行这个的时候，应该是直接执行 animate() ，结束后再执行 css()。可这样的话，变化的过程应该是 渐变到透明度为1 { 这个过程中，由于还没block，应该是隐藏的 }，接着突然block显示出来。

然而，实际上，却不是这样。这两个似乎是同时进行一样。我尝试着，将css()提前，却出现的是： 直接blcok显示，后面的渐变效果就没出现了。

是由于animate() 有什么特殊性吗？麻烦各位帮忙解疑下，尽量简单明白点，本人菜鸟来的，对专业术语不大通！！在此多谢了

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)
})

Answer 2

• 我不知道是要它们同时进行还是先移动过去再隐藏，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 3

animate 是异步执行的。

也就是说，当你的opacity慢慢变成1的过程，display:block已经开始执行。

追问

那是否应该这样理解，block 和 Opacity, 首先选择器已被block，同时选择器的 opacity 被设置为0 了？

还有，如果为何将 css()提前，却没这样的效果？

Answer 4

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

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

Answer 5

你也说了是 选择器.animate 那你说选择器.animate.css.eq.val.attr.post能执行吗