个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
这是一个使用绝对定位和 jQuery 为 Div 制作动画的简单测试用例。
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
<script type='text/javascript'>
function slide(){
$('#box').animate({'left': 0},3000);
}
</script>
</head>
<body>
<button onclick="slide()">slide</button>
<div id="box" style="position: absolute; width: 120px; height: 100px; background: #ff0000; left: 500px"></div>
</body>
在 Firefox 4(Mac 上)中，动画“流泪”并且非常断断续续。在 Safari 和 Chrome 中效果更好，但仍然有明显的抖动。
将问题简化为上述测试用例后，我不太确定下一步该做什么。这是 jQuery 的错误吗？我是否缺少绝对定位的某些内容，导致浏览器重绘负载？如果有人可以尝试上面的代码并思考一下，我将非常感激......即使这只是为了让我放心，我不会发疯:)
最佳答案
为什么要使用onclick="slide()"如果你想在单击按钮时滑动然后执行以下操作
#box {
position: absolute;
width: 120px;
height: 100px;
background: #ff0000;
left: 500px;
}
<button id="slide">slide</button>
<div id="box">whetever</div>
<script type='text/javascript'>
$(document).ready(function (){
$('button#slide').click(function(){
$('#box').animate({'left': 0},3000);
});
});
</script>
Smoother Animations
Additionally jQuery is now using the new requestAnimationFrame method provided by browsers to make our animations even smoother. We can use this functionality to avoid calling timers and instead depend upon the browser to provide the best possible animation experience.
.promise()
就像之前的 $.ajax() 一样，$.animate() 得到“延迟”。当集合上的所有动画完成时，jQuery 对象现在可以返回一个 Promise 来观察:
$(".elements").fadeOut();
$.when( $(".elements") ).done(function( elements ) {
// all elements faded out
});
很乐意提供帮助:)
关于JQuery 'Choppy' 动画 - 简单测试用例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5673252/
27
4
0
这是一个使用绝对定位和 jQuery 为 Div 制作动画的简单测试用例。 function slide(){ $('#box').an
我正在尝试使用 Angular 构建一个页面，该页面具有各种进度条，表示为需要一定时间的操作所取得的进度。我想要做的是使用 Angular Material 进度条制作从时间 0 到结束时间的平滑动画
每当我使用时在react中使用getUserMedia标记，结果非常不稳定。在这里查看这个 fiddle : https://jsfiddle.net/nLmdoaua/ 但是，当我在 React 之
我在 unity 编辑器或 unity 应用程序(windows 独立应用程序)上播放一些视频时遇到问题。视频文件的音频不连贯。 如果我使用任何播放器在 Windows 上播放录制的视频文件，则不会出
我正在开发一款 iPhone 游戏，我有一个 NSTimer 可以为屏幕上的所有对象设置动画: EverythingTimer = [NSTimer scheduledTimerWithTimeInt
使用以下内容: React-Native-Maps (AirBnB - 0.16.4) 终极版 我对如何更新我的 state.map.region 有点困惑。我有触发状态更改的手动和自动 (anima
我正在使用 Pygame 和 Tkinter 构建一个音乐播放器，目前正在尝试添加一个工作时间 slider ，允许您通过拖动 slider 跳到歌曲中的特定点。 我将 slider 结尾的值(配置中
我是一名优秀的程序员,十分优秀！