隐藏-jq的弹出层的一个问题

作者:用户 来源:互联网 浏览:603 次 时间:2016-07-07 11:06:33

jq隐藏效果

隐藏-jq的弹出层的一个问题 - 摘要: jq的弹出层的一个问题<divclass="box1">11</div><divclass="box2">12</div>要做一个效果,box1刚开始是

问题描述

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>
解决方案二:

隐藏和显现需要CSS3,慢慢从box2里面上升需要JS,具体自己查吧。

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击
云栖社区(yq.aliyun.com)为您免费提供隐藏-jq的弹出层的一个问题相关信息,包括 jq隐藏 效果 的信息 ,所有隐藏-jq的弹出层的一个问题相关内容均不代表云栖社区的意见! 该页面h5页面的地址是:https://m.aliyun.com/yunqi/wenzhang/show_56942,您可以点击隐藏-jq的弹出层的一个问题-手机站访问。
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备

热点导航