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 docs：

队列（默认值：true）
  类型：布尔值或字符串
  一个布尔值，指示是否将动画放置在效果队列中。如果为false，则动画将立即开始。从jQuery 1.7开始，queue选项也可以接受一个字符串，在这种情况下，动画会被添加到该字符串所代表的队列中。使用自定义队列名称时，动画不会自动启动;你必须调用.dequeue（“queuename”）来启动它。

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

$(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!!");

请注意，在示例中，您可以检查jquery是否实际找到了应用效果的元素elem。
这样您也可以跟踪可能的DOM选择器问题。

animate（）不使用动态css（）属性

1 个答案: