div滑鼠移至上方，子項目上移，滑鼠移出，子項目下移動畫。

標籤：lin   style   nim   tle   htm   部分   idt   script   seo   

HTML：

　　　　　　　　　　　　　　<div class="edt_title" >                            <div id="edt_title">                                <p class="edt_title_top">e定投</p>                                <div class="product_line"></div>                                <p class="edt_title_c">                                多種期限<br /><br />穩健收益                                </p>                                <p class="edt_title_top" style="margin-top: 60px;">e定投</p>                                <div class="product_line"></div>                                <p class="edt_title_c">                                多種期限<br /><br />穩健收益                                </p>                                <div class="product_more">                                    查看全部                                </div>                            </div>                        </div>

css：

.edt_title{    height: 200px;    width: 150px;    margin: 200px auto;    text-align: center;    overflow:hidden;/* 溢出部分不顯示 */}#edt_title{    position: relative;/* 子項目設定relative */}

js

　　　　　　　　　　　　　　　$("#edt_title").mouseover(function(){  $(this).stop().animate({bottom:‘200px‘},800);  });  $("#edt_title").mouseout(function(){  $(this).stop().animate({bottom:‘0px‘},800);  });

 stop()事件用來阻止動畫一直運行。

div滑鼠移至上方，子項目上移，滑鼠移出，子項目下移動畫。