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

感觉这样写有点烦,有更简洁的办法没?比如用判断语句?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery动画特效</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <style >
            div{
                position:absolute;
                top:200px;
                width:50px;
                height:50px;
                background-color:red;
                color:white;
                border-radius:20px;
                text-align:center;
                line-height:20px;
                left:50px;
                }
        </style>

    <body>
        <input id="left" type="button" value="左移" />
        <input id="right" type="button" value="右移" />
        <div><font></font></div>
        <script>
            $(function(){
            var $timel=0;
            var $timer=0;
            $("#left").bind("click",function(){                 ++$timel;
                $("div").animate({
                    left:"+=50px"
                },3000,function(){
                    $(this).animate({
                        width:'+=20px',
                        height:'+=20px'
                    },2000,function(){
                        $("font").html("第"+$timel+"次左移");
                    });
                });
             });
                $("#right").bind("click",function(){
                    ++$timer;
                    $("div").animate({
                        left:"-=50px"
                    },3000,function(){
                        $(this).animate({
                            width:'-=20px',
                            height:'-=20px'
                        },2000,function(){
                            $("font").html("第"+$timer+"次右移");
                        });
                    });
                });
            });
        </script>
    </body>
</html>

玥_

2016-05-04

源自：jQuery基础课程 7-13

关注问题我要回答

392

操作

收起

3 回答

肥仔汇回答被采纳 +3 积分
2016-05-04

我用了一个function来包裹变形的动作代码如下

<script>
            $(function(){
                var $timel = 0;
                var $timer = 0;
                var $symbol = "";
                var $chart = "";
                $("#left").bind("click", function(){
                    $symbol = "-";
                    $chart = "左";
                    $timel++;
                    $time = $timel;
                    Move($symbol, $chart, $timel);
                });
                $("#right").bind("click", function(){
                    $symbol = "+";
                    $chart = "右";
                    $timer++;
                    Move($symbol, $chart, $timer);

                });

                function Move($symbol, $chart, $time){
                    $("div").animate({
                        left:$symbol + "=50px"
                    },3000,function(){
                        
                        $(this).animate({
                            width: $symbol + '=20px',
                            height: $symbol + '=20px'
                            },2000,function(){
                                $("font").html("第" + $time + "次" + $chart + "移");
                            });
                    });
                }
            })
</script>