jQuery技术

jQuery动画回调函数

字号+ 作者: 来源: 2014-11-16 22:49 我要评论( )

在上一篇文章中,如果想在最后一步切换元素的CSS样式,而不是隐藏元素:

css("border","solid 5px blue");

如果知识按照常规的方式,将fadeOut(“slow”)改为css(“border”,”solid 5px blue”),并不能达到预期的效果。预期效果是在动画的最后一步改变元素的样式,而实际的效果是,刚开始执行动哈ude时候,css()方法就被执行过了。

出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下:

$(function () {
 $("#panel").click(function () {
 $(this).animate({
 left: "400px",
 height: "200px",
 opacity: "1"
 }, 3000).animate({
 top: "200px",
 width: "200px"
 }, 3000, function () {
 $(this).css("border", "5px solid blue");
 })
 });
});

这样以来,css()方法就加入到动画队列中了,从而满足了上文提出的需求。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评