Jquery使用按钮设置高度更改动画

基本上，我所做的是做一个“查看更多”类型的事情。我有一小段文字描述我所做的事情，在这段文字的末尾有一个按钮。I（它实际上是一个链接，带有按钮样式）。当按下按钮时，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;
}
});

$（文档）.ready（函数（）{
var$mottheight=$（“#row mott”）.height（）；
如果（$mottheight==300）{
$（'#mott btn collapse'）。单击（函数（）{
$（'#row mott'）。设置动画({
身高：200
}, 300);
$（'#mott'）.html（'自2011年9月以来，我一直在沃伦·莫特高中网站工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进并帮助这些学生随着时间的推移学习"去吧",；
});
}
否则如果（$mottheight<300）{
$（'#mott btn'）。单击（函数（）{
$（'#row mott'）。设置动画({
身高：300
}, 400);
$（'#mott'）.html（'自2011年9月以来，我一直在沃伦·莫特高中网站工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进并帮助这些学生随着时间的推移学习ey go。自2011年9月以来，我一直在Warren Mott高中网站上工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。该网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进和帮助这些学生学习随着他们的发展。我从2011年9月开始在沃伦·莫特高中网站上工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进和帮助那些学生边走边赚。”）；
});
}
否则{
返回0；
}
});

您的函数编码非常笨拙。您需要捕获函数中的高度，而不仅仅是页面加载时的高度，并且可以合并所有单击项

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>');
    }
});

var$row_mott=$（'row mott'），
$mott=$（“#mott”）；
$（'#mott btn collapse'）。单击（函数（）{
var$mottheight=$row_mott.height（）；
如果（$mottheight==300）{
$row_mott.stop（）.animate（{height:200}，300）；
$mott.html（'自2011年9月以来，我一直在沃伦·莫特高中网站工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进并帮助这些学生随着时间的推移学习"去吧",；
}否则如果（$mottheight<300）{
$row_mott.stop（）.animate（{height:300}，400）；
$mott.html（'自2011年9月以来，我一直在沃伦·莫特高中网站工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进并帮助这些学生随着时间的推移学习ey go。自2011年9月以来，我一直在Warren Mott高中网站上工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。该网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进和帮助这些学生学习随着他们的发展。我从2011年9月开始在沃伦·莫特高中网站上工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进和帮助那些学生边走边赚。”）；
}
});

注意：

• 我将选择器转换为缓存的变量；多次使用选择器是一种很好的做法
• 我在动画之前添加了

  .stop（）

  ，以防止排队过多
• 我将操作整合到一个按钮中；这更符合个人偏好，但为了获得更一致的用户体验，使用一个“展开/折叠”按钮是相当标准化的

---

您的函数编码非常笨拙。您需要捕获函数中的高度，而不仅仅是页面加载时的高度，并且您可以合并所有单击项

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>');
    }
});

var$row_mott=$（'row mott'），
$mott=$（“#mott”）；
$（'#mott btn collapse'）。单击（函数（）{
var$mottheight=$row_mott.height（）；
如果（$mottheight==300）{
$row_mott.stop（）.animate（{height:200}，300）；
$mott.html（'自2011年9月以来，我一直在沃伦·莫特高中网站工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进并帮助这些学生随着时间的推移学习"去吧",；
}否则如果（$mottheight<300）{
$row_mott.stop（）.animate（{height:300}，400）；
$mott.html（'自2011年9月以来，我一直在沃伦·莫特高中的网站上工作。我是保持网站处于最佳状态的四名学生网站管理员之一。但是，我们不能因为所有的编码而获得荣誉。这个网站由大约40名网页设计学生管理。作为网站管理员，我的工作是修复、改进和帮助这些学生学习
 $(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 */

});