Question

快速提问。我试图用jquery动画一些东西，虽然它的工作，这是我的问题。

首先是代码：

$(document).ready( function(e){

    // vars
    var question = $('#faqQues');
    var answer = $('#faqAns');  
    var ansCont = $('#faqAnsCont');


    question.click(function(){
         if (answer.css("display") != "none") {
             answer.animate({'height':0}, 500, hmm);

             function hmm() {
                 answer.css("display","none");  
             } 
         } else {
             answer.css("display","block");
             answer.animate({"height":'100'},500);  
         }
    });
});

基本上我想做的就是能够点击某些内容并为其高度设置动画（向上）。这个代码块出现了问题

else {
    answer.css("display","block");
    answer.animate({"height":'100'},500);               
}

具体在这一行

{"height":'100'}

我想要发生的是它将动画回到div的默认高度。我不想添加数字(like the 100 above)高度因为div内部内容总是会改变因此动态高度但是如果我移除高度，它会中断。我尝试了一些其他的东西，包括可能

.animate({"height":'**divNameHere**.height()'},500);

但是虽然它没有出错，但它不起作用lol。

所以我在这里寻求帮助。我需要对此进行哪些更改，以便将其动画回到div的高度而不直接输入数字？

任何提示，代码，链接等我都会很高兴地欣赏

Answer 1

为什么不使用符合您要求的slideUp()和slideDown()方法？

或者更好的是slideToggle()自动处理这两种方式？

$(document).ready(function(e) {
    // vars
    var question = $('#faqQues');
    var answer = $('#faqAns');
    var ansCont = $('#faqAnsCont');

    question.click(function() {
        answer.slideToggle(500);
    });
});

http://jsfiddle.net/5wBeu/

演示

这就是你所需要的......

Answer 2

.animate({"height": $('**divNameHere**').height()},500);

你应该省略引号。

Answer 3

$(document).ready(function() {

    // vars
    var question = $('#faqQues');
    var answer = $('#faqAns');  
    var ansCont = $('#faqAnsCont');

    question.click(function(){
        if (answer.is(':visible')) {
            answer.animate({height : 'toggle'}, 500, function() {
                answer.hide();
            });
        }else {
            answer.show().animate({height : 'toggle'},500);   
        }
    });
});

或只是：

question.click(function() {
    answer.animate({height : 'toggle'});
});

jquery动画动态高度div

3 个答案: