所以我几乎已经完成了我想要实现的目标 - 一个全屏欢迎图像,每个会话加载时显示,并在较大的屏幕上淡出。 它还会在显示期间删除滚动条,并在完成时重新启用。
问题是,当它淡出时,任何文字和背景颜色加载或重新加载。图像和定位已经加载/淡入淡出。
任何建议/想法都非常感谢。
我尝试删除css / html因此让我相信它是javascript的东西。
if ($(window).width() > 769) {
$(window).load(function() {
var isshow = sessionStorage.getItem('isshow');
if (isshow== null) {
sessionStorage.setItem('isshow', 1);
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
// Show popup here
$.when($('#jPopup').show().delay(4000).fadeOut(2000))
.done(function() {
document.documentElement.style.overflow = 'auto'; // firefox, chrome
document.body.scroll = "yes"; // ie only
});
}
});
}
我还尝试过$(document).ready
而不是window.load
等等。
答案 0 :(得分:1)
您可以使用fadeOut本身传递完成回调。
if ($(window).width() > 769) {
$(document).ready(function() {
var isshow = sessionStorage.getItem('isshow');
if (isshow == null) {
sessionStorage.setItem('isshow', 1);
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
$("#jPopup").show().delay(4000).fadeOut(2000, function() {
// will run upon fadeout completion
document.documentElement.style.overflow = 'auto'; // firefox, chrome
document.body.scroll = "yes"; // ie only
});
}
});
}
点击此处查看工作示例:http://jsbin.com/liruxilupa