Jquery animate()在chrome上获得laggy
下面是我的第一个jquery脚本:Jquery animate()在chrome上获得laggy,jquery,html,css,performance,jquery-animate,Jquery,Html,Css,Performance,Jquery Animate,下面是我的第一个jquery脚本: <!DOCTYPE html> <html> <head> <title>Sliding test</title> <style> html { height: 100%; padding: 0; margin:
<!DOCTYPE html>
<html>
<head>
<title>Sliding test</title>
<style>
html {
height: 100%;
padding: 0;
margin: 0;
}
body{
text-align: center;
background: url('bg.png');
height: 100%;
margin: 0;
padding: 0;
box-shadow: 0 0 900px 35px rgba(0, 0, 0, 0.5) inset;
}
#global_wrap {
width: 1000px;
margin: 30px auto 0;
}
.container {
/*background: pink;*/
height: 240px;
width: 290px;
overflow: hidden;
border-radius: 5px 5px 5px 5px;
border: 3px solid #EAEAEA;
display: inline-block;
}
.slide_wrapper {
height: 500px;
width:290px;
margin-left: 0px;
padding-left: 0px;
text-align: left;
background: white;
margin-top: 0;
}
li {
color: grey;
list-style: none outside none;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
}
h3 {
background: none repeat scroll 0 0 #252525;
color: white;
font-family: sans-serif;
margin: 0;
padding-bottom: 12px;
padding-top: 12px;
text-align: center;
width: 290px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="global_wrap">
<div class="container">
<div class="slide_wrapper">
<a href="javascript:;">
<img src="visuel1.jpg" width="290" height="193">
<h3>Category 1</h3>
</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="slide_wrapper">
<a href="javascript:;" >
<img src="visuel2.png" width="290" height="193">
<h3>Category 2</h3>
</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="slide_wrapper">
<a href="javascript:;">
<img src="visuel3.jpg" width="290" height="193">
<h3>Category 3</h3>
</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
</div>
<script>
//wrapper_click=false;
$(".slide_wrapper a").click(function(){
if($(this).hasClass('open'))
{
// wrapper_click = false;
$(this).parent().animate({'margin-top': '0px'}, 'slow');
$(this).removeClass('open');
}
else
{
//wrapper_click = true;
$(this).parent().animate({'margin-top': '-193px'}, 'slow');
$(this).addClass('open');
}
});
</script>
</body>
</html>
滑动试验
html{
身高:100%;
填充:0;
保证金:0;
}
身体{
文本对齐:居中;
背景:url('bg.png');
身高:100%;
保证金:0;
填充:0;
盒影:0.900px 35px rgba(0,0,0,0.5)插页;
}
#全球包装{
宽度:1000px;
利润率:30px自动0;
}
.集装箱{
/*背景:粉红色*/
高度:240px;
宽度:290px;
溢出:隐藏;
边界半径:5px 5px 5px;
边框:3px实心#EAEAEA;
显示:内联块;
}
.滑套{
高度:500px;
宽度:290px;
左边距:0px;
左侧填充:0px;
文本对齐:左对齐;
背景:白色;
边际上限:0;
}
李{
颜色:灰色;
列表样式:无外无;
}
a{
颜色:继承;
文字装饰:无;
}
img{
显示:块;
}
h3{
背景:无重复滚动0 0#252525;
颜色:白色;
字体系列:无衬线;
保证金:0;
垫底:12px;
填充顶部:12px;
文本对齐:居中;
宽度:290px;
}
//包装器单击=错误;
$(“.slide_包装器a”)。单击(函数(){
if($(this).hasClass('open'))
{
//包装器单击=错误;
$(this.parent().animate({'margin-top':'0px'},'slow');
$(this.removeClass('open');
}
其他的
{
//包装器单击=真;
$(this.parent().animate({'margin-top':'-193px'},'slow');
$(this.addClass('open');
}
});
我不知道为什么,但它在JSFIDLE上运行良好:
它在所有浏览器上都能正常工作,除了chrome,我不明白为什么。。。我想我在代码中犯了一些错误,这使得它很滞后
有人知道脚本中的错误吗?它在chrome中运行良好。在这里,您可以选择使用toggle类来减少编码:
// toggleClass( class, [duration] )
$(".slide_wrapper a").click(function () {
$(this).parent().toggleClass('open','slow');
});
css:
此外,幻灯片包装内的所有链接都将执行点击平衡,我建议:
<a class="toggler" href="javascript:;">
$(".toggler").click...
它在chrome中运行良好,您可以选择使用toggle类来减少编码:
// toggleClass( class, [duration] )
$(".slide_wrapper a").click(function () {
$(this).parent().toggleClass('open','slow');
});
css:
此外,幻灯片包装内的所有链接都将执行点击平衡,我建议:
<a class="toggler" href="javascript:;">
$(".toggler").click...
我发现是什么让脚本变得迟钝,这是由于CSS属性:
html {
height: 100%;
}
我不知道为什么这会使我的脚本变慢,但当我删除它时,我的脚本工作得非常好
谢谢你们所有人的帮助,特别是乔尔·哈克斯,谢谢你们非常有用的帮助 我发现是什么让脚本变得迟钝,这是由于CSS属性:
html {
height: 100%;
}
我不知道为什么这会使我的脚本变慢,但当我删除它时,我的脚本工作得非常好
谢谢你们所有人的帮助,特别是乔尔·哈克斯,谢谢你们非常有用的帮助 这在Chrome 26.0.1410中运行良好
img{ image-rendering: -webkit-optimize-contrast; }
这在Chrome 26.0.1410中运行良好
img{ image-rendering: -webkit-optimize-contrast; }
为我平滑地向上滚动。。。(Chrome V26.0.1410)在Chrome中工作。。。chrome可以工作,但当点击框时,框会跳跃。我不明白为什么,我的本地版本不起作用,而JSFIDLE现在工作得很好……@davor谢谢你的报告,我昨天也收到了这个错误,现在我通过在“跳跃”元素上添加一个float:left
)-也谢谢你的时间:)为我平滑地向上滚动。。。(Chrome V26.0.1410)在Chrome中工作。。。chrome可以工作,但当点击框时,框会跳跃。我不明白为什么,我的本地版本不起作用,JSFIDLE现在运行良好……@davor谢谢你的报告,我昨天也收到了这个错误,现在我通过在“跳跃”元素上添加一个float:left
)来修复它:)-谢谢你也感谢其他人的时间:)谢谢你的帮助,但这仍然很滞后(但实际上很少编码)我使用了你的代码,我不明白为什么,但没有动画(它在你的JSFIDLE上工作),类会切换,但不会滑动…有什么想法吗?你需要jquery UI,这会改变切换类函数谢谢,它可以工作,但仍然很滞后,我真的不明白是什么错了!请,你能尝试复制/粘贴我在问题上给出的代码并尝试找出其中的错误吗?然后