jQuery动画在FF中运行良好,但在所有其他浏览器中效果不佳
jQuery animation working fine in FF but badly in all other browsers
我有一个大的div动画,在窗口加载时从屏幕左侧到全屏宽度(通过通过setTimeout延迟2秒后触发的函数)。div 有一个按钮,然后关闭/重新打开所述div。
这个左右div 动画在 Firefox 中运行良好,但在任何其他浏览器中都无法正常工作。在其他浏览器中,div 完全从 l-r 移动,但没有任何动画(这包括:chrome、opera、safari 等)。但是,关闭/重新打开动画在所有浏览器中都很好,所以这是不可能的。
所以,我只是寻求帮助的窗口加载div动画 - 可以建议为什么它在FF中很好,但在所有其他浏览器中都不能?下面是一个 html/js/css 的小提琴示例(按此顺序):
http://jsfiddle.net/2nvhP/3/
<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;
}
不要在
css 中使用 right:100%
.nav-slider
使用 left:-100%
.
参见:这把小提琴
相关文章:
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- jquery代码在Mozilla中有效,但在其他浏览器上无效
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- Javascript的某些部分在Chrome中不起作用,但在其他浏览器中可以完美工作
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中),而不考虑激活的模块
- 防止“;jQuery(html)"防止触发浏览器请求图像和其他参考内容
- 如何隐藏空<span>在IE中使用javascript.(注意,在其他浏览器中工作正常)
- 我的时间倒计时脚本在谷歌浏览器中工作正常,但在其他浏览器中打开时它显示为南楠
- 如何使用javascript从同一浏览器下的其他页面获取URL?有可能吗
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器
- 带有Safari的Javascript;不起作用——所有其他浏览器都起作用
- Javascript可以在chrome中使用,但不能在其他浏览器中使用
- 有没有一种方法可以在过滤掉iOS Chrome、Firefox和其他浏览器的同时检测iOS safari
- 在其他浏览器中打开页面时,令牌未保存在$window.sessionStorage中
- 编写脚本以关闭其他选项卡或浏览器
- 无法从IE中的data.responseText获取结果,但在其他浏览器中工作
- 在Firefox中使用锤子捏 错误地定向 - 适用于所有其他浏览器
- 在IE8和其他带有javascript的浏览器中获取正文类的标准解决方案是什么
- 索引在IE中导致错误;在其他浏览器中工作
- 将JSON对象转换为敲除observable在IE8中不起作用,但在所有其他浏览器中都起作用