17.24-百叶窗

jQuery小知识整理

get（）；——取得所有匹配的 DOM 元素集合。获得是一个集合（多个元素），get（0）；获得集合中的第一个元素

eq（） ；——匹配一个给定索引值的元素，只能选择单个元素

each（function（i）{}）；——遍历元素，与for循环一样，通过判断i的值，可以匹配集合中的多个元素

以上三个的功能比较相似，都是选择，但是各有特点。

toggle（）；切换表格的显示/隐藏属性
slideToggle（speed,callback）；滑动切换表格的显示/隐藏属性, 可加切换速度和回调函数

delay（1000）；延迟函数1000毫秒

百叶窗

html

<div class="shutter">
        <ul>
            <li class="no0">
            </li>
            <li class="no1">
            </li>
            <li class="no2">
            </li>
            <li class="no3">
            </li>
            <li class="no4">
            </li>
        </ul>
    </div>

先设每个li的位置left分别为
0
160
320
480
640
jQuery 第一部分，先设鼠标移出的动画，移动为20px，非常简单！

$("li").mouseleave(function() {
            $("li").stop(true);//去掉在页面在运动时的重复动作
            $(".no0").animate({"left": 0});
            $(".no1").animate({"left": 120});
            $(".no2").animate({"left": 240});
            $(".no3").animate({"left": 360});
            $(".no4").animate({"left": 480});
        })

jQuery 第二部分，鼠标移入，每个li的动作，也非常简单！
分析，当鼠标移入中间那个时，左边元素往左移，右边往右移，这就得给左右两边的li设置移动动画

$("li").mouseenter(function() {
            $("li").stop(true);//去掉在页面在运动时的重复动作
            var left = [0,60,120,180,240]; //因为left值减少，少的左边元素往左移
            var right = [ 0,560,620,680,740];//left值增加，大的右边元素往右移
            $("li").each(function(j) {  //遍历之后判断，哪些是左右边的元素
                if (j <= i) { // j <= i
                    $(this).animate({"left": left[j]});
                    console.log($(this));
                } 
                else {  // j > i 
                    $(this).animate({"left": right[j]});
                }
                console.log(i+",");
                console.log(j);
            });
        })