在我淡入淡出之前,我该如何获得一个弹出框?我曾经用’display:0;’然后使用
jquery .fadeIn().但现在如果我将显示设置为0,当我淡入淡出时,当然我失去了盒子的弹性.如果我使用jquery将显示设置为flex,那么它只会出现,而不是淡入淡出.
<div class="" id="popupContainer"> <div class="flex-item-popup" id="popup"> <div class="close"><i class="fa fa-2x fa-times-circle"></i></div> <h2></h2> <div class='text'></div> <div class="videos"></div> <div class="flex-container images"></div> </div>
#popupContainer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; z-index: 15; }
jQuery的:
$(document).ready(function() { //??? });
解决方法
这似乎有点奇怪,但你可以做的是在css中,设置为显示:none.那么诀窍就是把你的jquery中的显示设置为flex,然后再隐藏,然后fadeIn:
CSS:
#popupContainer { /* ... */ display:none; flex-direction: row; flex-wrap: wrap; /* ... */ }
JS:
$("#popupContainer") .css("display","flex") .hide() .fadeIn();
这是因为fadeIn()将项目设置回其以前的非隐藏显示值.所以设置flex和重新隐藏它将设置这个“默认”为它被设置回.
http://jsfiddle.net/z2kxyjcq/1/
$("#popupContainer") .css("display","flex") .hide() .fadeIn(2000);
#popupContainer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display:none; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; z-index: 15; background-color: red; } #popupContainer *{ border: 1px solid blue; background-color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="" id="popupContainer"> <div class="flex-item-popup" id="popup"> <div class="close"><i class="fa fa-2x fa-times-circle">1</i></div> <h2>2</h2> <div class='text'>a</div> <div class="videos">b</div> <div class="flex-container images">c</div> </div>
原文地址:https://www.jb51.cc/jquery/180048.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。