晨露博客

关注互联网,关注科技,关注生活!

上一篇: 博客没有人气的原因总结 下一篇:为什么移动通讯还停留在号码时代?

jquery今天给大家介绍一个Jquery实现连续过渡是的效果。只需要几行代码,我们能让一个方块渐变+缩放比例地飞来飞去。是不是很好玩呢?好啦,还是先看看关键技术吧。

第一行: 当 <a class="run"> 被点击
第一行: 激活 <div id="box"> 的不透明度(opacity)=0.1,直到值达到400px,速度达到1200px/ms
第一行: 当opacity=0.4, top=160px,height=20,width=20,以"slow"显示
第一行: 当opacity=1, left=0, height=100, width=100,也以"slow"显示
第一行: 当opacity=1, left=0, height=100, width=100, 也以"slow"显示
第一行: 当top=0, 以"fast"显示
第一行: 然后,以常速上滑 (default speed = "normal")
第一行: 然后以"slow"下滑
第一行:返回失效会阻止浏览器跳向链接锚点。

关键代码:

$(document).ready(function(){
    $(".run").click(function(){
      $("#box").animate({opacity: "0.1", left: "+=400"}, 1200).animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow").animate({opacity: "1", left:

"0", height: "100", width: "100"}, "slow").animate({top: "0"}, "fast").slideUp().slideDown("slow")
return false;
    });
});

您可以查看演示,或是下载源码

小博文章如没有特殊说明均为原创,如要帮忙推广还望加上我的链接哦!
  • 本文Url: http://www.chenlublog.com/post/jquery-chainable-effects.html (出自: 晨露博客)
  • 点击这里获取该日志的TrackBack引用地址

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    关于本文

    您正在阅读的是:Jquery实现连续过渡效果
    morningdew 发表于:2011-6-15 12:10:45
    分类:网站建设
    关键词:jquery  

    博客作者

    Morningdew

    晨露博客

    热门文章

    最近更新

    最新评论及回复

    最近留言

    站类搜索

    博文分类

    博文归档

    Copyright ©2010 晨露博客. All Rights Reserved.网站地图  Theme Designed By TangChang
    本博客采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
    This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
    CONTACT ME:E-mail:tcmorningdew@gmail.com QQ:515667845<风荷雨莲>   津备ICP09004821   GO TO TOP

    Powered By Z-Blog 1.8 Walle Build 91204