slide切换：回调函数-内容项的动画效果

互联网品牌传播解决方案

成都顶级品牌网站建设公司-锐狐网络！
基于互联网的品牌行销策略的策划与执行。
品牌形象挖掘、梳理、包装、表现与传播。
辅助企业实现品牌战略目标的互联网解决方案。

了解详细>

Web应用(B/S)定制开发

自主研发、完善的开发框架。
详细的需求调研及解决方案。
实施项目经验丰富的项目团队。

了解详细>

互联网时代的整合营销

基于互联网的品牌营销策略的定制与执行。
品牌形象挖掘、梳理、包装、表现与传播。
坐拥着最为丰富的行业经验与优势资源。

了解详细>

您的网站全职管家

成熟的监控与报警机制。
丰富的整合营销的能力和经验。
专业数据分析、开发和维护部门。

了解详细>

不可忽略的移动终端

IOS系统、Android系统应用开发。
App Store、Google Play 发布。
APP推广服务。

了解详细>

全新的学术会议体验

工作更高效，主办方更轻松。
线上报名，让主办方不再为报名的事而费尽脑筋。
线上投稿、审稿，为主办方提高收寄、审稿效率。
酒店预订，会议行程更加轻松。

了解详细>

医院网站管理系统(HMS)

与大型医院密切合作。
诊疗挂号很轻松，检验结果实时查询，在线医患服务。
便捷的数据处理能力，稳定的软件基础架构。

了解详细>

智慧点亮网络(RUIFOX)

互联网改变世界，我们改变互联网。
精彩前沿技术演练场。
锐狐新产品尝鲜体验。

了解详细>

• 品牌网站建设
• 应用系统开发
• 网络整合营销
• 网络运维托管
• 手机APP开发
• 学术会议系统
• 医院网站系统
• 实验室

var $ele = $("#slideCallback");
var $appendBg = $ele.find(".boxBg, .appendBg");
var tagWidth = $ele.find(".j_slideTags li").width();
var time = 800;

$ele.slide({ effect:"fade", trigger: "click", duration: time, auto: true, keepTags: true, easing: "easeOutQuad" }, function(cur, old){

    if(cur === old) return; //首次切换不执行

    //移动标签容器中的附加背景
    $appendBg.animate({left: tagWidth * cur + 20});

    //获取相关元素
    var $oldContent = this.lists.eq(old),
        $oldPic = $oldContent.find("img.pic"),
        $oldCont = $oldContent.find("div.cont"),
        $curContent = this.lists.eq(cur),
        $curPic = $curContent.find("img.pic"),
        $curCont = $curContent.find("div.cont");

    //预备动画
    $oldPic.stop(true, true).animate({left: -100, opacity: 0}, time);
    $oldCont.stop(true, true).animate({top: 100, opacity: 0}, time);

    $curPic.stop(true, true).css({left: 100, opacity: 0}).delay(200).animate({left: 0, opacity: 1}, time);
    $curCont.stop(true, true).css({top: -200, opacity: 0}).delay(200).animate({top: 0, opacity: 1}, time);  
    $curCont.children().eq(1).stop(true, true).css({paddingTop: 50, paddingBottom: 50}).delay(200).animate({paddingTop: 0, paddingBottom: 0}, time);  //形成文字部分的落差感
});