单击另一个 div 时为 div 中的高度变化设置动画

Posted 2023-05-08

【中文标题】单击另一个 div 时为 div 中的高度变化设置动画

【英文标题】：Animate the change of height in a div on click of another div

【发布时间】：2013-08-15 07:15:42

【问题描述】：

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

这里是带有div 的 html 以单击 elementTop 的 id 和以动画高度显示的 div 是 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>

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

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

【问题讨论】：

您不能将动画设置为“自动”

尝试将动画设置为 500 像素...仍然无效 :(

你导入了 jQuery 库吗？ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

This post 可能有用

是的，我做到了，就像这样

【参考方案1】：

这可行，但您永远无法将其动画化，因为当元素为 0px 高时您无法点击它：

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

剪辑！

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


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

【讨论】：

我非常喜欢这个！这太棒了，它的工作原理我会尝试在我的问题中使用你的想法，但具体来说，我要做的是让用户单击 div elementTop 并通过动画高度隐藏和显示 elementBottom 切换

您还可以将 height 属性更改为 toggle 而不是像素。缩短代码：jsfiddle.net/876R9

再次更新@Novocaine88 建议 ;)

干杯@swiper192！请注意，我将 JSFiddle 更改为包含 THE OLLIE ;)

【参考方案2】：

您使用 jQuery 有时不使用，这有点奇怪。使用

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

获取要操作的 Dom 元素。然后你就可以做

e.animate();