jquery使用按鈕動畫高度變化

Question

基本上我正在做的是製作一個「查看更多」類型的東西。我有一段文字描述了我所做的工作，並在段落末尾有一個按鈕。我（這是一個真正的鏈接，帶有按鈕樣式）。當按鈕被按下時div會擴大到400px，而額外的文字會被添加.html（）;但是當我點擊「查看少」按鈕折回到較小的段落和200px div時，沒有任何反應。

jQuery的

$(document).ready(function(){ 
var $mottheight = $('#row-mott').height(); 

if ($mottheight == 300) { 
    $('#mott-btn-collapse').click(function(){ 
    $('#row-mott').animate({ 
     height:200 
    }, 300); 
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>'); 

}); 
} 
else if ($mottheight < 300){ 
    $('#mott-btn').click(function(){ 
    $('#row-mott').animate({ 
     height:300 
    }, 400); 
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>'); 
    }); 
} 
else { 
    return 0; 
} 
}); 

Answer 1

你的功能是非常笨拙編碼。您需要在功能中捕捉高度，而不是僅在頁面加載時，並且可以合併所有點擊項目。

var $row_mott = $('#row-mott'), 
    $mott = $('#mott'); 

$('#mott-btn-collapse').click(function(){ 
    var $mottheight = $row_mott.height(); 

    if ($mottheight == 300) { 
     $row_mott.stop().animate({height:200}, 300); 
     $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>'); 
    } else if ($mottheight < 300){ 
     $row_mott.stop().animate({height:300}, 400); 
     $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>'); 
    } 
}); 

注：

• 我轉換你的選擇爲緩存變量;多次使用選擇器時的良好做法
• 我在動畫之前添加了.stop()以防止過多排隊
• 我將操作合併到一個按鈕中;這是更個人的偏好，但爲了更加一致的用戶體驗，只有一個「擴展/摺疊」按鈕是非常標準的

Answer 2

您只運行一次點擊處理程序。因此，在文檔加載時，它會找到＃行 - mott高度，設置它，並評估您擁有的。默認情況下，它是< 300.您需要檢查點擊事件中的高度，而不是之前。

Answer 3

試試這個..

$(document).ready(function(){ 
    var $mottheight = $('#row-mott').height(); 
    $('#mott-btn-collapse').click(function(){ 
     if ($mottheight == 300) { 
    $('#row-mott').animate({ 
      height:200 
     }, 300); 
     $('#mott').html('I\'ve worked on the W...</a>'); 

    }); 
    }else if($mottheight < 300){ 
     $('#mott-btn').click(function(){ 
     $('#row-mott').animate({ 
      height:300 
     }, 400); 
     $('#mott').html('I\'ve worked on the Warren Mott....they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>'); 
     }); 
    } 
    }); 

Answer 4

我想通了。這是非常簡單的，我真的不知道爲什麼我以前沒有想到這一點。

$(document).ready(function(){ 

    $('#mott-appended').hide(); 
    $('#patrick-appended').hide(); 

    /* Start Warren Mott High School text show/hide */ 

    $('#mott-btn').click(function(){ 
    $('#mott-appended').show('slow'); 
    $(this).hide('slow'); 
    }); 

    $('#mott-btn-collapse').click(function(){ 
    $('#mott-appended').hide('slow'); 
    $('#mott-btn').show('slow'); 
    }); 

    /* End Warren Mott High School text show/hide */ 
    /* Start Patrick Studios text show/hide */ 

    $('#patrick-btn').click(function(){ 
     $('#patrick-appended').show('slow'); 
     $(this).hide('slow'); 
    }); 

    $('#patrick-btn-collapse').click(function(){ 
     $('#patrick-appended').hide('slow'); 
     $('#patrick-btn').show('slow'); 
    }); 

    /* End Patrick Studios text show/hide */ 

});