jQuerty使用animate的callback立刻发生了

在w3School上这这么写的

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

然后我想弄一个切换图片并且有渐入渐出的动画效果

 var imgIndex = $(this).index() + 1;

 $(".mainImg img").animate({ opacity: "0.1" }, 600,toggleImg(imgIndex ) })
                                                                        .animate({ opacity: "1" }, 400);

 function toggleImg(imgIndex)

{

  $(".mainImg img").attr("src", "App_Imgs/active0" + imgIndex + ".jpg");

}

　结果是传入的imgIndex显示undenfind，并且代码是马上执行的，并没有等待动画结束。然后改成这样

 $(".mainImg img").animate({ opacity: "0.1" }, 600,function () {
                    $(".mainImg img").attr("src", "App_Imgs/active0" + imgIndex + ".jpg"); }).animate({ opacity: "1" }, 400);
                    

　　就可以了 感觉是因为本函数是调用函数，所以 imgIndex没有销毁可以继续使用。

      初学jQuerty和js，学的并不深入，如果有什么地方理解错了，希望能指点一下我。

 

转载于:https://www.cnblogs.com/xshaobaozi/p/4940770.html