                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

老师，为什么我写完之后他要停一会才开始运动呢，而且只会变大小，不会左右移动，这是怎么回事

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>调用animate实现小动画</title>
<link rel="stylesheet" href="">
<style>
*{ margin: 0; padding: 0}
span{background-color: #f00;border: 1px solid blue; width:80px; height: 80px}
</style>

</head>
<body>
<h4>调用animate实现小动画</h4>
<span></span>
<div id="tip"></div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("span").animate({
left:"+=100px",
},3000,function(){
$("span").animate({
width:"+=100px",
height:"+=100px"
},3000,function(){
$("#tip").html("多功能化");
});
});
});


            


</script>
</body>
</html>

慕的地9598177

2015-10-12

源自：jQuery基础课程 7-9

关注问题我要回答

467

操作

收起

4 回答

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>调用animate实现小动画</title>
<style>
*{
    margin: 0;
    padding: 0
}
span{
    position:absolute;<!--在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。-->
    background-color: #f00;
    border: 1px solid blue;
    width: 80px;
    height: 80px
}
</style>
</head>
<body>
<h4>调用animate实现小动画</h4>
<span></span>
<div id="tip"></div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $("span").animate({
            left:"+=100px",
            },3000,function(){
                $("span").animate({
                    width:"+=100px",
                    height:"+=100px"
                    },3000,function(){
                        $("#tip").html("多功能化");
                        });
                    });
    });
</script>
</body>
</html>

详情请参考jQuery 效果 - animate() 方法

http://www.w3school.com.cn/jquery/effect_animate.asp

0 回复有任何疑惑可以回复我~

懵懂zai路上
2015-10-21

默认的span位置是static的无法实现移动，要实现移动必须要设置position为absolute或者relative才可以

0 回复有任何疑惑可以回复我~

hei_yu_fa
2015-10-18

3000这个参数就是延迟3秒执行的意思啊，，，至于不能左移，教程里不是说了嘛position要设置一下absolute 或relative才行啊。。。你这

0 回复有任何疑惑可以回复我~

echo_kinchao
2015-10-12

因为逻辑走不下去

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

jQuery基础课程

参与学习 154768 人
解答问题 7184 个

加入课程学习，有效提高前端开发速度

老师，为什么我写完之后他要停一会才开始运动呢，而且只会变大小，不会左右移动，这是怎么回事

我要回答关注问题

意见反馈帮助中心 APP下载