animate() arbeitet nicht mit dynamischen css() -Eigenschaften

Question

Ich arbeitete daran, meine Animationen für verschiedene Elemente dynamisch zu machen, als ich auf dieses Problem stieß (gerade als ich gerade fertig war). Ich kann Eigenschaften nicht mithilfe der JQuery css() -Methode animieren. Ich konnte die Animation mit hart codierten Werten für die Höhe, Breite und Top-Eigenschaften arbeiten. Hier ist der Code-Schnipsel:

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() zeigt, dass $(elem).css('[PROPERTY]')IS Rückgabe des korrekte CSS-Wert. Irgendwelche Ideen, warum das nicht funktioniert?

Answer 1

Die animate() -Methode stellt die Effekte in eine Warteschlange und wartet, bis die erste Effektanimation beendet ist, um die zweite zu starten, sodass sie seriell angewendet werden. Von jquery docs:

Warteschlange (Standard: true)
Typ: Boolean oder String
Bedingung, die anzeigt, ob die Animation in den Effekten Warteschlange zu platzieren. Bei false startet die Animation sofort. Ab jQuery 1.7 kann die Warteschlangenoption auch eine Zeichenfolge akzeptieren. In diesem Fall wird die Animation der durch diese Zeichenfolge dargestellten Warteschlange hinzugefügt. Wenn ein benutzerdefinierter Warteschlangenname verwendet wird, wird die Animation nicht automatisch gestartet. Sie müssen .dequeue ("warteschlange") aufrufen, um es zu starten.

Wenn Sie die Animationen wollen in „parallel“ passieren, können Sie tun:

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

Hinweis in dem Beispiel, dass Sie überprüfen können, dass das Element elem, auf dem Sie den Effekt anzuwenden ist eigentlich von jquery gefunden.
Auf diese Weise verfolgen Sie auch mögliche DOM-Selektorprobleme.