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

怎么没有效果啊

欧巴

2015-04-16

源自：jQuery基础课程 7-13

关注问题我要回答

491

操作

收起

1 回答

康振宁
2015-04-17

<!DOCTYPE html>
<html>
<style type="text/css">
    div{
        position:absolute;
        top:50px;
        left:200px;
        height:50px;
        width:50px;
        border:1px solid red;
        }
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
    <div></div>
    <input id="left" type="button" value="左移"/>
     <input id="right" type="button" value="右移"/>
     <script type="text/javascript">
        $(function(){
            var $ltime=0;
            var $rtime=0;
            $("#left").bind("click",function(){
                $ltime++;
                $("div").animate({
                    left: "-=50px"
                },3000,function(){
                    $("div").html("左移"+$ltime+"次")
                    })
            });
           $("#right").bind("click",function(){
               $("div").animate({
                   left: "+=50"
               },3000,function(){
                   $rtime++;
                   $(this).html("右移"+$rtime+"次")
               })
           }) 
        });
     </script>
</body>
</html>