当上周五匆匆瞥过W3CSchool上的jQuery教学讲解，小试过一个向下卷展的效果之后，愕然发觉，原本一直认为很复杂的需要花很多时间去研究的效果，又或者是只能从网上找来的JS效果，原来，就是可以通过jQuery这门技术，而轻而易举地，自己写出来！短短几行，简单清晰明了，效果立竿见影。一下子对jQuery好感倍增！
今天，又是新一周工作的开始。一进公司便想着如何实际运用一下jQuery。想到曾经领导想要把总部网站上的一个关于公司历史介绍的时间轴效果做到我们LOCAL的网站上（其实也就是历史介绍图片可以左右滚动，如下图，鼠标滑过左右箭头时，时间轴文字和图片都会产生向左或向右的滚动效果）。那时曾经自行研究过一阵，但是貌似没有成功，看着总部那考究的繁复的代码，一个又一个加载在里面的js,css，我头都晕了。这哪里是头啊？于是，今天，就想着能否自己模拟出来。
终于，功夫不负有心人，从上午一直研究到中午，还牺牲了本来就短暂而又宝贵的午间休息半个小时多，终于，研究出来了！
要解决的问题，其实主要有三：一是如何产生滚动效果？二是如何产生遮罩？三是如何悬停离开？
如何产生滚动效果
1 $("#right").mouseover(function(){$(".block").animate({left: '-500px'}, 4000);});上面这句便可以产生移动效果。其中#right是向右箭头所在层的ID，.block是我用的示例中核心内容区域所在层的样式名，animate是jQuery效果之一（详细说明可参见：http://www.w3school.com.cn/jquery/jquery_animate.asp）。在该内容层的CSS样式中，需要添加position:absolute;。
如何产生遮罩
这里需要在核心内容信息展示层外面，再创建一个层（假设叫#ibox），并为其添加两个CSS样式overflow:hidden;POSITION: relative;。这样，便可以产生遮罩效果，即，当核心内容无论如何左右移动，出现在画面中能够看见的，将只有ibox层宽高范围。
如何悬停离开
前面在产生滚动效果时，用了jQuery中的mouseover事件，同样地，jQuery中也有mouseout事件，另外，还有stop()效果。如下这样配合使用，便可以产生鼠标离开时，动画效果停止的功能。
$("#left").mouseout(function(){$(".block").stop();});
感谢
最后，整个研究过程中，要感谢一下参考过的资料：
http://mrthink.net/jquery-clickslide-autoslide-showimg/ （貌似是个喜欢jQuery的私人博客）
疑问
整个过程中，比较疑惑或者说诡异，应该更准确地说，是自己还不太清除的地方是遮罩的产生过程，这两个层上的CSS效果position相关属性为什么一定要这么设定？
后记
关于上述这个问题，刚才网上又查了下，关于这个overflow:hidden与position:relative的关系，有疑问的朋友还真是不少呢！！网上说法实在是太细，太多，看了头晕。自己通过对遮罩层和核心层上的position样式以及overflow样式，做交替或去掉试验，得出结果如下。
首先，毫无疑问的是，overflow:hidden，必须有，必须作用在遮罩层上，这是产生遮罩效果的重要根本之一，不可缺。
至于这个position到底如何处理，我们还是需要回到那句关键的jQuery语句来看：$("#right").mouseover(function(){$(".block").animate({left: '-500px'}, 4000);});，说的是触发事件时，.block所在层的CSS属性left值减去500。然后，去查了下w3c，那里对于动态定位（即absolute, relative）的示例中都有提到过left这个属性，并且说除了对static定位不起作用。那么，据此推断，上面这句jQuery所针对的.block层，如果用position: relative也可以咯？
于是，先去掉了两个层的所有position属性，没有任何效果。这应征了w3c上说的left属性只对动态定位有效，因为当前没有对层的定位指明过，所以也无法移动。
随后，对核心层加了个position:absolute，当jQuery作用时，内容层直接跳出遮罩框，从body的left:0位置开始移动起来。（如下图，浅黄为遮罩层，浅蓝及图片为内容层）
最后，将内容层上的position属性改为relative，果然起效果了！正常了（如下图）。这样一来，也就是说，即便不用absolute内容层配合relative遮罩层，也同样可以实现遮罩效果！
最后，又试了下，将内容层的relative属性移动到遮罩上，貌似遮罩依旧有，但是jQuery移动效果就没有了，猜想div的position属性是自动不继承的。再一查w3c，果然，记住，DIV的默认POSITION值是静态的STATIC（http://www.w3school.com.cn/css/pr_class_position.asp）。
