这个javascript在Firefox中运行缓慢,如何让它运行流畅?
我有一个菜单栏,它使用了一些 JavaScript 来达到很好的效果。悬停效果在 google chrome、safari 甚至 Internet Explorer 中运行顺利。
我尝试过删除图像,但似乎不起作用。我尝试禁用
Here's the javascript:
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'181px',
'height':'181px',
'left':'0px'
},250,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},350,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'171px'},250,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '181px';
if($elem.parent().children().length == $elem.index()+1)
left = '-181px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});});`
Here's the html:
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
...
</ul>
和 css:
ul.sdt_menu {
list-style:none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
margin:0;
padding:0
}
ul.sdt_menu a {
text-decoration:none;
outline:none
}
ul.sdt_menu li {
-webkit-box-shadow:1px -1px 0 #000;
-moz-box-shadow:1px -1px 0 #000;
box-shadow:1px -1px 0 #000;
float:left;
width:180px;
height:85px;
position:relative;
cursor:pointer;
background:rgba(0,0,0,.6)
}
ul.sdt_menu li > a {
position:absolute;
top:0;
left:0;
width:180px;
height:85px;
z-index:110;
-moz-box-shadow:0 0 1px #000 inset;
-webkit-box-shadow:0 0 1px #000 inset;
box-shadow:0 0 1px #000 inset
}
ul.sdt_menu li a img {
border:none;
position:absolute;
width:0;
height:0;
bottom:0;
left:85px;
z-index:300;
-moz-box-shadow:0 0 4px #000;
-webkit-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000}
ul.sdt_menu li span.sdt_wrap {
font-weight:100;
position:absolute;
top:25px;
left:0;
width:180px;
height:60px;
z-index:215
}
ul.sdt_menu li span.sdt_active {
position:absolute;
background:#181818;
top:85px;
width:181px;
height:0;
left:0;
z-index:214;
-moz-box-shadow:0 0 9px #000 inset;
-webkit-box-shadow:0 0 9px #000 inset;
box-shadow:0 0 9px #000 inset
}
ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a {
margin-left:15px;
text-shadow:1px 1px 1px #000
}
ul.sdt_menu li span span.sdt_link {
color:#fff;
font-size:24px;
float:left;
clear:both
}
ul.sdt_menu li span span.sdt_descr {
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:13px;
letter-spacing:1px
}
ul.sdt_menu li div.sdt_box {
position:absolute;
width:181px;
overflow:hidden;
height:171px;
top:85px;
left:0;
display:none;
background:rgba(10,10,10,.85);
z-index:103;
border-right:1px #000 solid
}
ul.sdt_menu li div.sdt_box a {
float:left;
clear:both;
line-height:30px;
color:#0B75AF
}
ul.sdt_menu li div.sdt_box a:first-child {
margin-top:15px
}
ul.sdt_menu li div.sdt_box a:hover {
color:#fff
}
知道是什么导致了 Firefox 中的故障吗?
I've got a menubar that uses a bit of javascript for a nice effect. The hover effect runs smoothly in google chrome, safari and even internet explorer.
I've tried removing the images, that doesn't seem to do it. I tried disable
Here's the javascript:
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'181px',
'height':'181px',
'left':'0px'
},250,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},350,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'171px'},250,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '181px';
if($elem.parent().children().length == $elem.index()+1)
left = '-181px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});});`
Here's the html:
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
...
</ul>
and the css:
ul.sdt_menu {
list-style:none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
margin:0;
padding:0
}
ul.sdt_menu a {
text-decoration:none;
outline:none
}
ul.sdt_menu li {
-webkit-box-shadow:1px -1px 0 #000;
-moz-box-shadow:1px -1px 0 #000;
box-shadow:1px -1px 0 #000;
float:left;
width:180px;
height:85px;
position:relative;
cursor:pointer;
background:rgba(0,0,0,.6)
}
ul.sdt_menu li > a {
position:absolute;
top:0;
left:0;
width:180px;
height:85px;
z-index:110;
-moz-box-shadow:0 0 1px #000 inset;
-webkit-box-shadow:0 0 1px #000 inset;
box-shadow:0 0 1px #000 inset
}
ul.sdt_menu li a img {
border:none;
position:absolute;
width:0;
height:0;
bottom:0;
left:85px;
z-index:300;
-moz-box-shadow:0 0 4px #000;
-webkit-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000}
ul.sdt_menu li span.sdt_wrap {
font-weight:100;
position:absolute;
top:25px;
left:0;
width:180px;
height:60px;
z-index:215
}
ul.sdt_menu li span.sdt_active {
position:absolute;
background:#181818;
top:85px;
width:181px;
height:0;
left:0;
z-index:214;
-moz-box-shadow:0 0 9px #000 inset;
-webkit-box-shadow:0 0 9px #000 inset;
box-shadow:0 0 9px #000 inset
}
ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a {
margin-left:15px;
text-shadow:1px 1px 1px #000
}
ul.sdt_menu li span span.sdt_link {
color:#fff;
font-size:24px;
float:left;
clear:both
}
ul.sdt_menu li span span.sdt_descr {
color:#0B75AF;
float:left;
clear:both;
width:155px;
font-size:13px;
letter-spacing:1px
}
ul.sdt_menu li div.sdt_box {
position:absolute;
width:181px;
overflow:hidden;
height:171px;
top:85px;
left:0;
display:none;
background:rgba(10,10,10,.85);
z-index:103;
border-right:1px #000 solid
}
ul.sdt_menu li div.sdt_box a {
float:left;
clear:both;
line-height:30px;
color:#0B75AF
}
ul.sdt_menu li div.sdt_box a:first-child {
margin-top:15px
}
ul.sdt_menu li div.sdt_box a:hover {
color:#fff
}
Any idea what's causing the glitchyess in Firefox?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我的第一个猜测是链接调用或选择器的绝对数量。我会下载免费的 dynatrace Ajax 版本。它会准确地告诉你时间都花在哪里了。我的猜测是从 JavaScript 到 dom 的封送以及所有链式调用。或者可能是渲染时间,但 dynatrace 会完美地缩小范围。
My first guess would be the sheer number of chained called or the selectors. I would download the free dynatrace Ajax edition. It will tell you exactly where the time is spent. My guess is the marshaling from JavaScript to the dom back with all of the chained calls. Or it could be the render time, but dynatrace will narrow it down perfectly.
问题出在底层图像上。我将它们更改为 div 并将它们设置为背景,效果非常好。不知道为什么 Firefox 在我的 javascript 下显示时会出现这样的问题。
The problem was with underlying images. I changed them to divs and set them as backgrounds and it worked like a charm. No idea why Firefox has such a problem displaying under my javascript then is did .