亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

animate如何用同一個按鈕控制橫向伸縮？

animate如何用同一個按鈕控制橫向伸縮？

滄海一幻覺 2018-08-06 11:10:43
為什么同一個按鈕上無法設置兩種animate屬性呢，該怎樣修改這段代碼使同一個按鈕點擊一次時伸展，點擊第二次時收縮呢?<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function()  {  var l = $("#box").width();  if(l = "100px"){     $(".btn1").bind("click",function(){       $("#box").animate({width:"300px"});     });   }else{     $(".btn1").bind("click",function(){       $("#box").animate({width:"100px"});     });   }; });</script></head><body><div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div><button class="btn1">Animate</button></body></html>
查看完整描述

1 回答

?
慕尼黑5688855

TA貢獻1848條經驗 獲得超2個贊

首先你需要具備以下知識：

  1. ready方法是什么時候執行的？

  2. bind方法是怎么用的？

  3. .btn1被點擊的時候會執行哪些代碼？

我們逐一來看。

ready方法是什么時候執行的？

ready方法在文檔加載完成后執行。
也就是說當body標簽解析完后，以下代碼將會執行一次：

1.  var l = $("#box").width();

2.  if(l = "100px"){

3.      $(".btn1").bind("click",function(){

4.          $("#box").animate({width:"300px"});

5.      });

6.  } else {

7.      $(".btn1").bind("click",function(){

8.          $("#box").animate({width:"100px"});

9.      });

10. };

我們來糾正一下代碼中的基礎錯誤。

1.  var l = $("#box").width();2.  if(l == 100){3.      $(".btn1").bind("click",function(){4.          $("#box").animate({width:"300px"});5.      });6.  } else {7.      $(".btn1").bind("click",function(){8.          $("#box").animate({width:"100px"});9.      });10. };

注意第2行的 = 已經被糾正為 ==。并且width方法返回的是100而不是"100px"。

bind方法是怎么用的？

bind方法用于給元素綁定事件處理函數。它本身并不會執行事件處理函數。
看如下代碼：

$(".btn1").bind("click", function(){
    $("#box").animate({width:"300px"});
});

注意，此時$("#box").animate(...)并沒有執行。而是在.btn1被點擊后才會執行。

.btn1被點擊的時候會執行哪些代碼？

現在我們來回顧一下上面標有行號的代碼1-10行。
這段代碼為.btn1綁定了一個點擊事件處理函數，.btn1被點擊后執行的就是這個處理函數。

這個處理函數到底是什么呢？
如果l == 100那么這個函數就是...animate(...300)，否則這個函數就是...animate(...100)。

注意，這個判斷是在文檔加載完成的時候執行了一次，而不是在每次點擊.btn1的時候執行。

因此，你在一開始就決定了點擊.btn1時應該調整#box的width為100還是300，并且此后是不會改變的。

應該如何實現你要的效果？

直接看代碼吧，如果已經能夠理解自然是再好不過：

$(document).ready(function() {
    $(".btn1").bind("click", function() {        var $box = $("#box");        if ($box.width() == 100) {
            $box.animate({width: "300px"});
        } else {
            $box.animate({width: "100px"});
        }
    });
});

更多關于jQuery的知識建議多查閱官方文檔。
希望對你有幫助。


查看完整回答
反對 回復 2018-09-14
  • 1 回答
  • 0 關注
  • 765 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號