jquery animate的递归调用

去年面试过一家做网站的公司，看了一下他们的案例，看懂一个蛮有意思的，一个房地产的官网，是用flash做的。感觉不错。

于是，闲暇之际，简单的jquery 模仿做了一下。下面是我的效果图.脚本也没啥优化，流畅度也没有flash流畅。但是重要的是看到这个flash，想到

如何实现它效果的思路，非常适合新手。

观察上诉，首先左侧是个载入动画，

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){

});

接着回调函数调用右侧

$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){//'easeOutSine' 引入easing.js 库

			rightImg();

			});

		function rightImg(){

                            $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){// myNext回调自己（递归）

			      $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext);   

				      if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0)){

					   //if($('.right').find('#lastImg').attr("style").indexOf('top:0')){

					   //alert('最后一个运动好了');

     		          $('.title').animate({ left:0},"slow",function(){//Sky 动画

						            $(".right").find('li').hover(function(){  // 右侧 hover效果

						   			$(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");

									},function(){

									$(this).find('.liSlideDown').stop(true,false).slideUp().hide();

									});//回调结束

						  });

				      }

		     	   });

			 };

最后的，点击右侧每一个，对应切换左边的上部分dear Sky 部分，观察这里的颜色，利用index 索引的实现。

下面附上源码：不要忘记 jquery 类库和easeing类库

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>载入动画 与递归显示</title>

<style>

*{ margin:0; padding:0;}

a{ text-decoration:none;}

ul,li{ list-style:none; margin:0; padding:0;}

.boxxxx{ width:1075px; height:580px; margin:80px auto; border:1px solid #666; background:#FFF; position:relative;}

.navBox{ position:absolute; bottom:0px; left:0; right:0px;}

.nav{ width:1075px; height:34px; margin:0 auto; background:#ddd;  color:#FFF; position:relative;}

.nav ul{ position:absolute; left:0px; top:0;}

.nav ul li{ float:left; display:inline; padding:0 45px; height:34px; line-height:34px; margin-right:1px; background:#999; transition:all 0.3s ease-out 0.3s;}

.nav ul li a{ color:#fff; }

.nav ul li:hover{ background:#666 !important;}

.left{ width:406px; height:565px; position:absolute; top:0; left:0; overflow:hidden; background: url(../images/wxc/3a.jpg) no-repeat center center #fff;}

.left ul {width:406px; height:565px; position:absolute; top:0; left:406px; z-index:22}

.left ul li{ position:absolute;top:0; left:0; display:none;width:406px; height:565px; z-index:23 }

.title{width:406px; height:142px; position:absolute; left:406px; top:0; background:rgba(172,30,64,0.6); background:#392438\9;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(style=0,Opacity=60)"\9;

filter:alpha(opacity=60)\9;/*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f00000,endColorstr=#7f0000000);*/  z-index:999; display:block; color:#fff ;}

.title h1{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:left; font-size:24px; float:left; width:91%; height:35px; line-height:35px; padding-left:9%; margin-top:20px; position:relative; }

.title h2{ font-family:"Times New Roman","微软雅黑", "宋体", Arial, Tahoma; text-align:center; font-size:14px; float:left;height:25px; line-height:25px;padding-left:9%; position:relative;}

.right{ width:668px; height:547px; background:#6FF;position:absolute; top:0; right:0; /*overflow:hidden;*/}

.right ul {width:668px; height:565px; position:absolute; top:0; left:0; background:#FFF }

.right ul li{ float:left; display:inline;width:132px; height:565px; margin-left:1px; position:relative; }

.right ul li img{display:none; position:absolute; left:0; right:0; top:-142px; }

.right .liImg{ display:none; width:132px; height:142px; overflow:hidden; opacity:0.3;}

.right .liImg:hover{ cursor:pointer}

.right #lastImg{top:-142px;}

.right .liSlideDown{ width:132px; height:100%; display:none;}

.liBk0{ background:#716058 }

.liBk1{ background:#fceabc }

.liBk2{ background:#eaa000;}

.liBk3{ background:#557da4;}

.liBk4{ background:#cc9966;}

.liContent{ position:absolute; left:0; top:142PX; width:132PX; height:423PX;}

</style>

<script src="../js/jquery-1.8.2.min.js"></script>

<script src="../js/easing.js"></script>

</head>

<body style="background:#666;">

<div class="boxxxx">

      <!--左边-->

       <div class="left">

        <ul>

        <div class="title"><h1>Dear Sky</h1><h2>This is the new word</h2></div>

        <li style="display:block"><img src="../images/wxc/left1.png" ></li>

        <li><img src="../images/wxc/left2.png" ></li>

        <li><img src="../images/wxc/left1.png" ></li>

        <li><img src="../images/wxc/left2.png" ></li>

        <li><img src="../images/wxc/left1.png" ></li>

       </ul>

      </div>

      <script>

      $(document).ready(function(e) {

		 //载入动画

		$('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',function(){

			rightImg();

			});

			function rightImg(){

                              $('.right').find('.liImg').first().fadeIn(90).animate({top:0,opacity:1},380,'easeOutSine',function myNext(){

			      $(this).parent().next().find('.liImg').fadeIn(90).animate({top:0,opacity:1},420,'easeOutSine',myNext);   

				      if($('.right').find('#lastImg').is(":animated")&&$('.right').find('#lastImg').css("top",0)){

					   //if($('.right').find('#lastImg').attr("style").indexOf('top:0')){

					   //alert('最后一个运动好了');

     		              $('.title').animate({ left:0},"slow",function(){//Sky 动画

						            $(".right").find('li').hover(function(){  // 右侧 hover效果

						   			$(this).find('.liSlideDown').slideDown().show().animate({opacity:0.7},"slow");

									},function(){

									$(this).find('.liSlideDown').stop(true,false).slideUp().hide();

									});//回调结束

						            });

			    }

		     	   });

			 }

		//tab 切换效果

                 var liNum=$('.right').find('li').length;

	         $('.right').on("click","li",function(){

		 var index=$('.right').find("li").index(this);

		 //alert(index);

		 $('.left').find('li').eq(index).fadeIn(1250).siblings().fadeOut(800).end().add('.title').fadeIn(1500);

		 //$('.title').addClass("liBk"+index).removeClass("liBk"+(index=index-1));

		  // var myClassName="title 'liBk'+index";

		  var myClassName='liBk'+index;

		  var titles='title'+' ';

		 // console.log('myClassName是'+myClassName);

		 function setTitleClass(myClassName){

			 $('.title').each(function(index) {

                this.className=(titles+myClassName);

            });

           }

		 setTitleClass(myClassName);

		// console.log("liBk"+index);

		 });

      });

      </script>

      <div class="right">

        <ul>

        <li><div class="liSlideDown liBk0"></div><img class="liImg" src="../images/wxc/r1.png" ><div class="liContent">11</div></li>

        <li><div class="liSlideDown liBk1"></div><img class="liImg" src="../images/wxc/r2.png" ><div class="liContent">22</div></li>

        <li><div class="liSlideDown liBk2"></div><img class="liImg" src="../images/wxc/r3.png" ><div class="liContent">33</div></li>

        <li><div class="liSlideDown liBk3"></div><img class="liImg" src="../images/wxc/r4.png" ><div class="liContent">44</div></li>

        <li><div class="liSlideDown liBk4"></div><img class="liImg " id="lastImg" src="../images/wxc/r5.png" ><div class="liContent">最后一个</div></li>

       </ul>

      </div>

     <!--右边-->

     <!-- 底部菜单-->

      <div class="navBox">

      <div class="nav">

         <ul>

           <li><a href="">菜单</a></li>

           <li><a href="">首页</a></li>

           <li><a href="">Sky</a></li>

           <li><a href="">其他</a></li>

           <li><a href="">测试</a></li>

           <li><a href="">我们</a></li>

         </ul>

      </div>

      </div>

</div>

</body>

</html>

jquery animate的递归调用的更多相关文章

jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
Python-函数的递归调用
递归调用顾名思义即在函数内部调用函数(自己调用自己),通常用它来计算阶乘,累加等注意: - 必须有最后的默认结果 if n ==0,(不能一直调用自己,如果没有可能会造成死循环) - 递归参数必 ...
jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
关于C++的递归调用（n的阶乘为例）
C++,是入门编程界的一门初期的语言.今天我们浅谈一下有关C++的递归调用. 在没有继承,多态,封装之前,C++几乎看成是C语言,除了一些简单的输出和头文件. 具体代码实现如下: #include&l ...
java中父类与子类，不同的两个类中的因为构造函数由于递归调用导致栈溢出问题
/* 对于类中对成员变量的初始化和代码块中的代码全部都挪到了构造函数中, 并且是按照java源文件的初始化顺序依次对成员变量进行初始化的,而原构造函数中的代码则移到了构造函数的最后执行 */ impo ...
【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下滚动到顶部: $('.scroll_to ...
玩坏JVM很简单--toString的递归调用
在JVM的内存管理机制下很少发生内存溢出的情况.至少我碰见的少,好像在SSH我多次发布项目时候出现过一次.今天看见一个特简单的方法让内存溢出(好吧,我似乎作死了--!): public class I ...
关于static 的研究与递归调用的输出
static的作用 :1.保存上次执行的结果 2.static int m; 这里默认m的初始值为0,即默认值是0 #include "stdio.h" int fun(int ...
C#函数式编程之递归调用
关于递归相信大家已经熟悉的不能再熟悉了,所以笔者在这里就不多费口舌,不懂的读者们可以在博客园中找到很多与之相关的博客.下面我们直接切入正题,开始介绍尾递归. 尾递归普通递归和尾递归如果仅仅只是从代码 ...

随机推荐

飘逸的python - 保持命名空间的整洁
API的设计是一个艺术活.往往需要其简单.易懂.整洁.不累赘. 很多时候,我们在底层封装一个方法给高层用,而其它的方法只是为了辅助这个方法的. 也就是说我们只需要暴露这个方法就行,不用关心这个方法是怎 ...
[HDU 1427]速度计算24点(DFS暴力搜索)
主题连接: pid=1427">http://acm.hdu.edu.cn/showproblem.php?pid=1427 思路:简单的DFS.dfs(sum,next,p)表 ...
Java EE (5) -- Java EE 6 JavaServer Faces Developer Certified Expert(1z0-896)
Section 1: Essentials of JSF2.0 Identify the features of JSF such as Facelets, BookMarkable View, AJ ...
Linux Kernel(Android) 加密算法汇总（四）-应用程序调用OpenSSL加密演算法
Linux Kernel(Android) 加密算法总结(三)-应用程序调用内核加密算法接口讲到了怎样调用内核中的接口的方法. 本节主要是介绍怎样Android C/C++应用程序调用Openssl ...
C#里System.Data.SQLite中对GUID的处理
string sqlstring = "select * from endpoint_policy where HEX([UserGuid]) ='" + CommonHelper ...
as3文本框的动态拖拽和编辑
如今非常多软件都支持了编辑界面的文本拖拽和点击编辑来直接改动数值, 这样便于操作, 并且体验性也好, 抛砖引玉吧于是就用好久没编写的as3来写了一下: 由于用的flash ide写的没有提示, 就临 ...
python常用类型的内置函数列表
1.list.append(obj) 向列表中加入一个对象obj fruits = ['apple', 'pear', 'orange'] >>> fruits.ap ...
Android的ViewAnimator而它的子类ViewSwitcher-android学习之旅（三十三）
ViewAnimator遗传FrameLayout,重合使用多个组件.可以增加部件数量,然后会有时间切换动画. ViewAnimator及其子类的继承关系 ViewAnimator经常使用属性 Vie ...
ExtJs迄今datefield控制设置默认值
假设extjs4 datefield日期控件设置默认值.为当天的前一月,和后一月 Ext.Date.MONTH 月 Ext.Date.YEAR 年 Ext.Date.DAY ...
微信开放平台公众号第三方平台开发教程四代公众号调用接口的SDK和demo
原文:微信开放平台公众号第三方平台开发教程四代公众号调用接口的SDK和demo 教程导航: 微信开放平台公众号第三方平台开发教程一平台介绍微信开放平台公众号第三方平台开发教程二创建 ...

jquery animate的递归调用

jquery animate的递归调用的更多相关文章

随机推荐

热门专题