使用 jQuery 在单击时对宽度和高度进行动画处理

Question

尝试在单击时对这些框的宽度和高度进行动画处理。

请参阅小提琴：

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

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

编辑：

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

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

});

我有时使用这个 hack 来计算动态高度：

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 规则只是禁用了它。例如，这个小提琴就可以正常工作。

Answer 2

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

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

Answer 3

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

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

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