项目遇到做个地区选择的滑动二级菜单，要通过鼠标移动地区的个数，来控制对应内容的外上高度，有个方便的方法及缺点说一下

HTML:

<div class="content" style="height: 150px;overflow: hidden;text-align: center">
      <div class="item" >
        <div>
            <h3 style="color: #FFF"><a href="">重庆</a></h3>
        </div>
        <div id="a" class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
            <!--名片-->
            <div class="cf">
                <div class="fl wd252 pr20">
                    <h2><a href=" ">衣服3</a></h2>
                </div>

            </div>
        </div>
    </div>
    <div class="item" >
        <div>
            <h3 style="color: #FFF">重庆</h3>
        </div>
        <div id="a" class="product-wrap posone" style="max-width: 200px;margin-top:-30px;height: 650px;background-color: #FFF">
            <!--名片-->
            <div class="cf">
                <div class="fl wd252 pr20" >
                    <h2><a href=" ">衣服1</a></h2>
                </div>
            </div>
        </div>
    </div>
    <div class="item" >
        <div>
            <h3 style="color: #FFF"><a href="">重庆</a></h3>
        </div>
        <div id="a" class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
            <!--名片-->
            <div class="cf">
                <div class="fl wd252 pr20">
                    <h2><a href=" ">衣服2</a></h2>
                </div>

            </div>
        </div>
    </div>
    <div class="item" >
        <div>
            <h3 style="color: #FFF"><a href="">重庆33</a></h3>
        </div>
        <div  class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
            <!--名片-->
            <div class="cf">
                <div class="fl wd252 pr20">
                    <h2><a href=" ">衣服33</a></h2>
                </div>

            </div>
        </div>
    </div>
</div>

<!--遍历地区条数，根据焦点所在item个数改变 .product-wrap的外上高度；fast控制队列数or速度？-->
<script type="text/javascript">
    var ps=$(".content .item");
    ps.each(function(index,el){
        $(this).on("mouseenter",function(){
            /* console.log(index);  在控制台显示位数*/
            $(".product-wrap").animate({marginTop:(index+1)*26+"px"}, "fast",function(){
                self._chat_frame_min = 1;
            });
 /* 其实正常不用（index+1）*26，如果你的item有高度的话，直接index+“px”就可以了*/
        });    });</script>

1.首先通过Jq获取content下的所有item子节点

2.用each遍历，其中index 即item节点的位置数(从0 开始)

3.通过this   mouseenter执行鼠标经过item所对应的函数

重点来啦！animate方法

4.

语法 

$(selector).animate(styles,speed,easing,callback)

styles

必需。规定产生动画效果的 CSS 样式和值。

speed

可选。规定动画的速度。默认是 "normal"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast"

easing	可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数： swing linear 扩展插件中提供更多 easing 函数。
callback	可选。animate 函数执行完之后，要执行的函数。

5.marginTop 方法，支持数字字母拼接