这样做为什么不可以？

个回答

Y_du: 2015-08-20 10:49:39

已采纳

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
            
        <script type="text/javascript">
            function l(){
                $("div").animate({left:"-=50px"},3000)
            }
            function r(){
                $("div").animate({left:"+=50px"},3000)
            }
        </script>
    </head>
    <style>
        div{
            position:fixed;
            height:100px;
            width:100px;
            background:red;
            border:3px solid green;
            line-height:100px;
            text-align:center;
        }
        #left {
            position: absolute;
            top: 120px;
        }
        #right {
            position: absolute;
            top: 120px;
            left: 60px;
        }
    </style>
    <body>
    <div id="test">快让我漂</div>
    <input id="left" type="button" value="左移" onclick="l()">
    <input id="right" type="button" value="右移" onclick="r()">

    </body>
</html>

隐匿山猫

2015-08-20 11:24:34

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <title>jQuery动画特效</title>
    </head>
    <style>
        div{
            height:100px;
            width:100px;
            background:red;
            border:3px solid green;
            line-height:100px;
            text-align:center;
        }
        #left{
            position: absolute;
            top: 120px;
        }
        #right{
            position: absolute;
            top: 120px;
            left:60px;
        }
    </style>
    <body>
    <div id="test">快让我漂</div>
    <input id="left" type="button" value="左移" onclick="l()">
    <input id="right" type="button" value="右移" onclick="r()">

    <script type="text/javascript">
        function l(){
            $("div").animate({left:"-=50px"},3000)
        }
        function r(){
            $("div").animate({left:"+=50px"},3000)
        }
    </script>
    </body>
</html>

0
隐匿山猫

2015-08-20 10:44:07

还是不行啊

0
Y_du

2015-08-20 10:31:45

你的代码有三个问题
1. 要引入jquery：<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
2 js文件头错了是<script type="text/javascript">，而不是<script type="test/javascript">
3 .animate 对应的div要定位

0