У меня есть анимация большого размера с экрана слева до полноэкранной ширины при загрузке окна (через функцию, запускаемую после 2-секундной задержки через setTimeout). У div есть кнопка для закрытия/повторного открытия указанного div.
Этот лево-правый div-аниматор отлично работает в Firefox, но не работает должным образом в каких-либо других браузерах. В других браузерах div полностью перемещается из lr, но без анимации (в том числе: хром, опера, сафари, т.е.). Тем не менее, анимация close/re-open отлично работает во всех браузерах, поэтому нет проблем.
Итак, это просто анимация 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;
}
Вместо использования right:100%
в css на .nav-slider
использовать left:-100%
.
Смотрите: эта скрипка