首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

Jquery 自定义slideUp卡通片

2013-11-21 
Jquery自定义slideUp动画slideUP 和slideDown都是通过改变高度来达到显示的效果的,不过有个问题是: 高度的

Jquery 自定义slideUp动画
slideUP 和slideDown都是通过改变  高度来达到显示的效果的,
不过有个问题是: 高度的改变都是从上到下显示的(减小高度相反)

我现在想实现一个弹出层  能不能从下往上展开? animate怎么写
[解决办法]
固定bottom的值,设置height

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#pop{position:absolute;left:400px;width:300px;bottom:200px;border:solid 1px black;display:none;}
</style>
<script>
    var height = 200;
    function show() {
        if ($('#pop').is(':visible')) $('#pop').animate({ height: 0 }, 300, function () { $('#pop').hide() });
        else $('#pop').show().animate({ height: 200 }, 300);
    }
</script>
<div id="pop"></div>
<input type="button" value="SHOW" onclick="show()" />

[解决办法]
引用:
Quote: 引用:

弹出层适合用fadeIn和fadeOut,简单又好看


那向上展开的有思路没

先设置容器高度为0,overflow:hidden,目标margin-top为其高度*-1,
然后增加容器高度同时增加margin-top,增加数值相同,直至margin-top为0,这样就会有向上展开效果

热点排行