87,904
社区成员
发帖
与我相关
我的任务
分享jquery做匀速动画。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="js/jquery.js"></script>
<script>
$(function(){
donghua();
setInterval(donghua,'1000');
setInterval(dingshiqi,'100');
});
function donghua()
{
$('.round_1').animate({left:"-=10px"},'3000');
}
function dingshiqi()
{
if($('.round_1').css('left')=='730px')
{
$('.round_1').css('left','1920px');
}
}
</script>
<title>无标题文档</title>
</head>
<style>
.content
{
width:950px; height:900px;
}
.wrap_content
{
width:1920px; height:900px; position:absolute; margin-left:-485px;
}
.jueduidingwei
{
position:absolute;
}
.round_1 {
border-radius: 15px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */
-moz-border-radius: 15px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 15px; /* Webkit浏览器的私有属性 */
background:#000;
width:15px; height:15px;
border-radius: 15px 15px 15px 15px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */
}
</style>
<body>
<div class="content">
<div class="wrap_content">
<div class="round_1 jueduidingwei" style="left:720px; top:200px;"></div>
</div>
<div style="width:900px; height:900px;"></div>
</div>
</body>
</html>
为什么不能匀速？ 发现animmate设置不了速度。。
...全文
请发表友善的回复…
发表回复
RHuniSoft 2014-04-13
- 打赏
- 举报
没看全代码，上边这样是不停地自身回调donghua函数，你上边的setInterval(donghua,'1000');这样是每隔1000（不加引号）毫秒执行一次donghua函数，肯定不连贯了，改成setInterval(donghua,0)就行了，下边donghua函数也不用改了，一定要看清楚每个函数参数的意思，参数的类型，别用乱了
RHuniSoft 2014-04-13
- 打赏
- 举报
添加回调，你看看animmate第四个参数是callback回调，就是动画运行完再执行什么，再执行该函数就是连贯的匀速动画及
function donghua()
{
$('.round_1').animate({left:"-=10px"},'3000','linear', donghua);
}function donghua()
{
$('.round_1').animate({left:"-=10px"},'3000','linear');
return donghua();
}
zhuolei123 2014-04-13
- 打赏
- 举报
animate还有第三个参数
$('.round_1').animate({left:"-=10px"},'3000','linear');
今天我给大家分享的是一款jQuery动画效果插件jquery.easing.js，使用该插件可以实现直线匀速运功、变加速运动、缓冲等丰富的动画效果。它非常小巧，且有多种动画方式供选择，使用简单且免费。
