怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效,在此先感谢!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效,在此先感谢!相关的知识,希望对你有一定的参考价值。
1.先获取弹窗的宽高;2.点击打开弹窗时,先设置弹窗宽高为0;
3.用animate方法,设置宽高,则可以实现渐渐增大;
4.最小化时也是一样的操作,用animate方式设置弹窗的宽高为0;
伪劣代码:
var $t = $("弹窗"),
w = $t.width(),
h = $t.height();
$("点击打开弹窗的元素").click(function()
$t.css(width:0,height:0).animate(
width: w,
height: h
,"fast");
);
$("点击最小化的元素").click(function()
$t.animate(
width: 0,
height: 0
,"fast");
) 参考技术A 用jQuery toggle(1000) 方法。 可以参考我的博文《用jQuery toggle函数控制div显示与隐藏》 参考技术B 可以不用alert()方法。自己写一个div,再用text()添加内容,动画用show()和hide(),或者用animate()。
移动端实现弹出框渐显和渐隐效果
在移动端想实现一个弹出框渐渐出现和消失的效果。由于用的是vue.js,所以写法有些独特,用
变量控制是否显示类名。
但是核心解决方法就是CSS3的animation属性应用
还有CSS中的z-index应用,必须初始化定义让弹出框在最底部。
还有就是opacity属性的应用,这样才有渐健弹出和渐渐消失的效果。
给弹出框3个css类,本身一个,弹出时一个和消失的时候一个。
JS方面很简单,就是2个css类之间的切换,注意本身初始化的类要一直保留。
html:
<div class="index-set" v-bind:class="{‘show-index‘:indexSetShow ,‘fade-index‘:indexSetFade}">
</div>
css:
.index-set{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width:90vw;
height:auto;
background:#fff;
border:2px solid #dfdfdf;
z-index:-100;
}
/****渐渐隐藏出现样式****/
.show-index{
animation:show 0.36s ease 0s;
animation-fill-mode:both;
}
.fade-index{
animation:fade 0.36s ease 0s;
animation-fill-mode:both;
}
@keyframes show{
from{
opacity:0;
}
50%{
opacity:0.5;
}
to{
opacity:1;
z-index:888;
}
}
@keyframes fade{
from{
opacity:1;
z-index:888;
}
50%{
opacity:0.5;
}
to{
opacity:0;
z-index:-100;
}
}
以上是关于怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效,在此先感谢!的主要内容,如果未能解决你的问题,请参考以下文章