jQuery slideDown()闪烁？
jQuery slideDown()闪烁？
提问于 2016-05-20 00:20:36
我有一个“欢迎”的效果，我已经添加到一个页面：http://citymoveremovals.com.au/definitive-moving-guide/
我给教务长上了一课“欢迎垫”
CSS：
body.hero-content-2 div.welcome-mat {
display: none;
height: 0px;
}jQuery脚本：
<script>
(function($) {var visitedBefore = Cookies.get('Definitive Guide');
if (visitedBefore >= 0) {
// page has been visited, so don't show the welcome mat
//Cookies.remove('Definitive Guide');
} else {
// Used to create a welcome mat effect when page is first loaded
resizeEvent();
$(window).bind("resize", function() {
resizeEvent();
});
function resizeEvent() {
// $("div.welcome-mat").css("display", "block");
// $("div.welcome-mat").css("height", $(window).height());
$("div.welcome-mat").hide().css("height", $(window).height()).slideDown(500);
$("div.welcome-mat").css("padding-top", $(window).height()/4);
}
$('.close-welcome-mat').on('click', function(e){
$("div.welcome-mat").slideUp(500, function() { $(this).remove(); } );
e.preventDefault();
});
// Add a cookie showing the page has been visited
//Cookies.set('Definitive Guide', '1', { expires: 14 });
}})(jQuery);
一切都很好，除了填充没有被添加到div顶部。我有点困惑，因为如果我在resizeEvent()中使用两个注释掉的行，那么填充就会被添加。
另外，在div中的slideDown()启动之前，会出现然后消失。
我已经玩了几个小时了，研究，但我不能完全用我的手指！
谢谢您的提前帮助，如果我错过了信息，请告诉我！
干杯,
约翰·德莱夫斯
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-20 01:42:21
演示：https://jsfiddle.net/IA7medd/1u4ohbuk/
您有两种解决方案:第一种解决方案是将脚本行移动到上面的div，使其向下滑动，如下所示：
function resizeEvent() {
$("div.welcome-mat").css("padding-top", $(window).height()/4);
$("div.welcome-mat").hide().css("height", $(window).height()).slideDown(500);
} 第二个解决方案是使用回调函数，如下所示：
$("div.welcome-mat").hide().css("height", $(window).height()*3/4).slideDown(500, function(){
$("div.welcome-mat").css("padding-top", $(window).height()/4);
});Stack Overflow用户
发布于 2016-05-20 01:06:25
您需要添加'px‘到您的css分配。试试这个：
$("div.welcome-mat").css("padding-top", $(window).height()/4 = "px");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37336088
复制相关文章
相似问题
腾讯云开发者
