Question

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

见小提琴：

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

我已经成功地将宽度设置为动画......不仅需要防止动画结束时的笨拙跳跃。

编辑：

值得注意的是我无法在li的

上设置静态高度

Answer 1

什么是200？在em？ PX？使用测量。 '200像素'。
您没有为高度和宽度设置动画：{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。

Answer 2

要为高度设置动画，只需在动画调用中的宽度下添加高度值。

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

Answer 3

你的css上的这一行引起了跳跃。

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

尝试删除“display：block”属性，它应该顺利进行。找到一种方法来获得该元素的补救措施。应该很容易。

使用jQuery单击动画宽度和高度

3 个答案: