在点击另一个div时对div中的高度变化进行动画处理

Question

我已经在Stack Overflow上搜索了这个，找到了很多答案，但没有一个与我的具体用途有关...基本上我不知道为什么这个代码不起作用的人请帮忙！任何输入都非常感谢，谢谢！

以下是div点击id elementTop div的HTML，elementBottom显示动画高度为<div id="elementTop" onclick="toggle_visibility('elementBottom');" > <img id="thumb" src="images/davey1.png" /> <a>davey blair</a> </div> <div id="elementBottom"> <p><span style="font-weight: bold;">age: </span>29</p> <p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p> <p><span style="font-weight: bold;">regular or goofy: </span>Regular</p> <p><span style="font-weight: bold;">years shredding: </span>lifetime</p> <p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p> <p><span style="font-weight: bold;">favorite trick: </span>switch mobe</p> <p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p> <p><span style="font-weight: bold;">music preference: </span>all music</p> <p><span style="font-weight: bold;">paper or plastic: </span>hands</p> <p><span style="font-weight: bold;">cat or dog: </span>dogs</p> <p><span style="font-weight: bold;">other hobbies: </span>living life. work to live never live to work, live life.</p> </div>

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.height == 'auto') {
    // e.style.height = '0px';
    $('#' + e).animate({height:'0px'});
  } else {
    // e.style.height = 'auto';
    $('#' + e).animate({height:'auto'});
  }
}

这是我正在使用的JavaScript / jQuery以及我注释掉的JavaScript行，但是没有注释的jQuery不起作用。

{{1}}

Answer 1

这样可行，但你永远不能动画回来，因为当0px为高时，你无法点击该元素：

http://jsfiddle.net/neuroflux/UYZY2/23/

SNIP！

function toggle_visibility(id) {
    $(id).stop().animate({height:'toggle'}, 500);
}

$('.clicker').on('click', function() {
   toggle_visibility('#' + $(this).attr('name'));
});

Answer 2

你使用jQuery有时候有点奇怪，有时却没有。使用

var e = $('#' + id);

获取您想要操作的Dom元素。那你就可以做到

e.animate();