使用 jQuery 在单击时为宽度和高度设置动画答案

【问题标题】：Animate both width and height on click with jQuery使用 jQuery 在单击时为宽度和高度设置动画
【发布时间】：2011-09-27 10:53:12
【问题描述】：

尝试在点击时为这些框的宽度和高度设置动画。

见小提琴：

http://jsfiddle.net/CqDXn/1/

我已经成功地获得了动画的宽度......不需要在动画结束时防止尴尬的跳跃。

编辑：

值得注意的是，我无法在 li 上设置静态高度

【问题讨论】：

标签： jquery height width jquery-animate

【解决方案1】：

200 是多少？在他们？像素？使用测量。 '200px'。
您没有为高度和宽度设置动画：{width: '200px', height: '200px'}
我放弃了自动高度的 .active css 规则。动画需要注意这一点。

代码：

$(document).delegate('.rewards-process li:not(.active)', 'click', function(e)
    {
        var toActive = $(this);
        $('.rewards-process li.active').addClass('transition');
        $('.rewards-process li.active').animate({
            width:'90px'
            , height: '90px'},1000,function() {
                $('.rewards-process li.active').removeClass('active').removeClass('transition');
            });

$(toActive).animate({
    width:'200px'
    , height: '200px'},300,function(){
        //animation complete
        $(toActive).addClass('active')
    });

});

我有时会使用这个技巧来计算动态高度：

function getElementHeight(e, width) {
 $("body").append("<div id='test' style='width:" + width + "'>" + e.html() + "</div>").hide();
    var h = e.outerHeight();
    e.remove();
    return h;
}

您需要确保 CSS 不会搞砸。

基本上，您创建具有最终宽度的元素，计算其高度，然后将其删除。此函数将返回一个数字，您需要添加px，您可以在动画中使用它。

但是你并不真的需要这个。高度会自动为您设置动画，您的 CSS 规则只是禁用了它。例如，this fiddle will work just fine。

【讨论】：

嗨 Radagaisus，感谢您的帮助！不幸的是，我无法为 li 设置静态高度，因为我不知道内容会是什么
有几种方法可以做到这一点。我将它们添加到我的答案中。
感谢您的帮助，我需要重新设计隐藏和显示内容的方式（点击时，具有活动类别的内容会显示：从现在开始阻止）。但是很好的建议，很高兴知道如果我只是修复我的方法，jQuery 会为我做这件事。非常感谢
这不是 jQuery。这是普通的旧 CSS 和浏览器渲染。
Radagaisus in jQ 如果您使用 .animate() 如果您打算在 PX 中制作动画，则不需要测量。仅当您使用 .css() 方法时，您才必须使用测量值

【解决方案2】：

要对高度进行动画处理，只需在 animate 调用中的宽度下添加一个高度值即可。

最后的跳转是由浏览器试图自动重新布局所有元素引起的。为了防止这种情况，您应该将它们全部放入一个网格中，然后在每次动画完成时重新布局网格。

【讨论】：

好的，我听到你在说浏览器试图重新布局所有元素。我不能添加 height: '200px' 因为我不确定容器中会包含什么内容......所以没有设置高度。也许我收集了最高元素的高度，然后将其添加到动画中......嗯
使用jQuery .height() 方法预先收集高度，然后用它来填充高度值。

【解决方案3】：

css 上的这一行导致了跳转。

.rewards-process .active img, .rewards-process .active p {display:block; }

尝试删除“display:block”属性，它应该会顺利进行。找到一种方法来解决该元素。这应该很容易。

【讨论】：

实际上只在这个选择器上“.rewards-process .active p”