                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)課程

感覺這樣寫有點(diǎn)煩,有更簡潔的辦法沒?比如用判斷語句?

<!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基礎(chǔ)課程 7-13

關(guān)注問題我要回答

415

操作

收起

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>