程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> 隱藏-jq的彈出層的一個問題

隱藏-jq的彈出層的一個問題

編輯:編程綜合問答
jq的彈出層的一個問題
 <div class="box1">11</div>
<div class="box2">12</div>

要做一個效果,box1剛開始是隱藏的,點了box2之後,box1慢慢從box2裡面上升,升到他原來的地方。jq該怎麼寫

最佳回答:


animiate方法就行了,需要將box1預先設置的top存儲起來,然後定位到box2去。點擊動態移動到原始位置

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
.box1,.box2{position:absolute;left:50%;top:50%;width:100px;height:100px;border:solid 1px #000}
.box1{display:none;top:100px;left:100px;z-index:100}
</style>
 <div class="box1">11</div>
<div class="box2">12</div>
<script>
    $(function () {
        var box1 = $('div.box1'), box2 = $('div.box2')
        , box1p = { top: box1.css('top'), left: box1.css('left') };
        box1.css({ top: box2.css('top'), left: box2.css('left') });
        box2.click(function () {
            box1.show().animate(box1p, 1000);
        });
    });
</script>
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved