我有一个大的 div 在窗口加载时从屏幕左侧动画到全屏宽度(通过 setTimeout 延迟 2 秒后触发的函数)。该 div 有一个按钮,然后关闭/重新打开所述 div。
这个左右 div 动画在 Firefox 中运行良好,但在任何其他浏览器中都无法正常运行。在其他浏览器中,div 完全从 lr 移动,但没有任何动画(包括:chrome、opera、safari、ie)。但是,关闭/重新打开动画在所有浏览器中都很好,所以这没有问题。
所以,这只是我正在寻求帮助的窗口加载 div 动画 - 可以告知为什么它在 FF 中很好但在所有其他浏览器中都没有?这是一个 html/js/css 的小提琴示例(按此顺序):
<header id="masthead" class="masthead-anim">
<div class="nav-slider">
<div class="nav-slider-content clearfix">
<h1 class="hide-text brand-logo">Brand</h1>
</div> <!--/.nav-slider-content-->
<a href="#" class="nav-slider-button nav-open"></a>
</div> <!--/.nav-slider-->
<a href="#" class="nav-slider-button-static nav-open"></a>
</header>
$(window).load(function(){
var navSliderFlag = 0;
var navSlider = $('div.nav-slider');
var navButton = $('a.nav-slider-button');
var navButtonStatic = $('a.nav-slider-button-static');
console.log ('navSliderFlag = ' + navSliderFlag);
navButtonStatic.html('<span class="hide">OPEN</span>');
navButton.html('<span class="hide">CLOSE</span>');
// Function to animate the primary nav on window load
function navSlideAnim() {
navSlider.animate({
left: 0
}, 1000, "swing");
//}, 750, "easeOutQuad");
navButtonStatic.css("left", "-80px");
navButton.removeClass('nav-open');
navSliderFlag = 1;
console.log ('navSliderFlag = ' + navSliderFlag);
}
// Pause the anim for 2 seconds
setTimeout(navSlideAnim, 2000);
// Open the navbar - i may be removing this completely later
navButtonStatic.on('click', function(){
navSlideAnim();
});
// Open the navbar and anim
navButton.on('click', function(){
$(this).html('<span class="hide">CLOSE</span>');
$(this).parents('.nav-slider').animate({
"left": "-=99.99%"
}, 1000, "swing", function(){
$(this).removeClass('nav-open');
navButtonStatic.animate({
left: 0
}, 500, "swing");
navSliderFlag = 0;
console.log ('navSliderFlag = ' + navSliderFlag);
});
});
});
html,
body {
margin: 0;
height: 100%;
background: #ccc;
color: #232323;
font-family: Helvetica, Arial, sans-serif;
}
a {
color: #fff;
}
#masthead {
padding: 80px 0 0;
}
/* Anim nav */
.nav-slider {
background: #fff;
margin: 0 80px 0 0;
position: relative;
right: 100%;
}
.nav-slider-content {
width: 940px;
margin: 0 auto;
padding: 40px 0 30px 75px;
}
.nav-slider-button,
.nav-slider-button.nav-open,
.nav-slider-button-static.nav-open,
.scrollup {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 80px;
background: #3F3E3E;
}
.nav-slider-button-static.nav-open {
left: 0;
top: 80px;
}