首先你需要具備以下知識(shí)：
ready方法是什么時(shí)候執(zhí)行的？
bind方法是怎么用的？
.btn1被點(diǎn)擊的時(shí)候會(huì)執(zhí)行哪些代碼？
我們逐一來(lái)看。
ready方法是什么時(shí)候執(zhí)行的？
ready方法在文檔加載完成后執(zhí)行。
也就是說(shuō)當(dāng)body標(biāo)簽解析完后，以下代碼將會(huì)執(zhí)行一次：
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. };
我們來(lái)糾正一下代碼中的基礎(chǔ)錯(cuò)誤。
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行的 = 已經(jīng)被糾正為 ==。并且width方法返回的是100而不是"100px"。
bind方法是怎么用的？
bind方法用于給元素綁定事件處理函數(shù)。它本身并不會(huì)執(zhí)行事件處理函數(shù)。
看如下代碼：
$(".btn1").bind("click", function(){
$("#box").animate({width:"300px"});
});注意，此時(shí)$("#box").animate(...)并沒(méi)有執(zhí)行。而是在.btn1被點(diǎn)擊后才會(huì)執(zhí)行。
.btn1被點(diǎn)擊的時(shí)候會(huì)執(zhí)行哪些代碼？
現(xiàn)在我們來(lái)回顧一下上面標(biāo)有行號(hào)的代碼1-10行。
這段代碼為.btn1綁定了一個(gè)點(diǎn)擊事件處理函數(shù)，.btn1被點(diǎn)擊后執(zhí)行的就是這個(gè)處理函數(shù)。
這個(gè)處理函數(shù)到底是什么呢？
如果l == 100那么這個(gè)函數(shù)就是...animate(...300)，否則這個(gè)函數(shù)就是...animate(...100)。
注意，這個(gè)判斷是在文檔加載完成的時(shí)候執(zhí)行了一次，而不是在每次點(diǎn)擊.btn1的時(shí)候執(zhí)行。
因此，你在一開(kāi)始就決定了點(diǎn)擊.btn1時(shí)應(yīng)該調(diào)整#box的width為100還是300，并且此后是不會(huì)改變的。
應(yīng)該如何實(shí)現(xiàn)你要的效果？
直接看代碼吧，如果已經(jīng)能夠理解自然是再好不過(guò)：
$(document).ready(function() {
$(".btn1").bind("click", function() { var $box = $("#box"); if ($box.width() == 100) {
$box.animate({width: "300px"});
} else {
$box.animate({width: "100px"});
}
});
});更多關(guān)于jQuery的知識(shí)建議多查閱官方文檔。
希望對(duì)你有幫助。
