javascript - animate() 不适用于动态 css() 属性

Question

当我遇到这个问题时(就在我即将完成时)，我正在努力让我的动画为各种元素动态工作。 我无法使用 JQuery css() 方法为属性设置动画。我能够为高度、宽度和顶部属性使用硬编码值制作动画。这是片段:

    function shrinkSection(section){
    var elem = section.SectionID;
    $(elem).find(".content").fadeOut(500);
    $(elem)
        .animate({top: $(elem).css('top'), height: $(elem).css('height')}, 500)
        .animate({width: $(elem).css('width')}, {duration: 500,
        complete: function() {
        $(elem).find(".icon").fadeIn(500);
        $(elem).addClass("active");
                }
        });
}

console.log() 显示 $(elem).css('[PROPERTY]') IS 返回正确的 css 值。知道为什么这行不通吗？

Answer 1

animate() 方法对效果进行排队，并等到第一个效果动画完成后才开始第二个效果动画，因此它们是连续应用的。来自 jquery 文档:

queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.

如果你想让动画“并行”发生，你可以这样做:

$(elem).find(".content").fadeOut(500);

if( $(elem).length )
    $(elem)
        .animate( { top: $(elem).css('top'), height: $(elem).css('height')}, 
                  { duration: 500, 
                    queue: false, 
                    complete: function() { alert('callback!!'); } } 
                )
        .animate( { width: $(elem).css('width')}, 
                  { duration: 500,
                    queue: false, 
                    complete: function() {
                        $(elem).find(".icon").fadeIn(500);
                        $(elem).addClass("active");
                    }   
                });
else 
    alert("No elem found!!");

请注意示例中，您可以检查应用效果的元素 elem 是否确实由 jquery 找到。
通过这种方式，您还可以跟踪可能的 DOM 选择器问题。