Frage JQuery animate mehrmals das selbe Atribut

[noelelias]

Guten Abend
gibt es eine schöne Möglichkeit dieses Problem zu lösen?

        $("#rfidPage #menu").animate({
                height:"5vw",
                height:"+=4vh"
            },500);

 

[noelelias]

das geht leider auch nicht

            $("#rfidPage #menu").animate({
                height:"5vw"
                }, {
                duration: 500,
                queue: false,
                complete: function() {}
            });
            $("#rfidPage #menu").animate({
                height:"+=4vh"
                }, {
                duration: 500,
                queue: false,
                complete: function() {}
            });

 

[noelelias]

das geht leider auch nicht

$("#rfidPage #menu").animate({
                height:"calc(5vw+4vh)"
            },500);

 

[methosiea]

Zuerst sollten wir mal wissen, was du überhaupt vorhast, dänn lässt sich sicherlich was finden :)

 

[noelelias]

ich würde gerne eine Animation von
height: 100vh zu
height: calc(5vw+4vh) machen.

 

[SpiceLab]

das geht leider auch nicht

 $("#rfidPage #menu").animate({
                height:"+=4vh"
                }, {
                duration: 500,
                queue: false,
                complete: function() {}
            });

Funktioniert, wenn height in Anführungszeichen gesetzt wird:

$("#rfidPage #menu").animate({
  "height": "+=4vh"
  }, {
    duration: 500,
    queue: false,
    complete: function() {}
});

 

[noelelias]

das Problem ist nicht das height sondern beide Animationen in Kombination

 

[SpiceLab]

(function animation() {
  var options = {
    duration: 500,
    easing: 'linear'
  };

  $('#rfidPage')
    .find('#menu')
    .animate({
      height: "5vw"
    },
    options
    )
    .animate({
      "height": "+=4vh"
    },
    $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    })
  );
})();

https://jsfiddle.net/spicelab/LjfqL96m/

 

[noelelias]

Hey spicelab danke für deine Antwort
es geht nicht darum das es am ende so rauf und runter geht sondern einfach die css position height:"calc(5vw+4vh)" einnimmt

habe es jetzt so gelöst auch wenn es etwas ge cheatet ist aber naja sieht auch ok aus

            $('#rfidPage #menu').animate({
                height: "5vw"
            },500).animate({
                "height": "+=4vh"
            },500);

 

[SpiceLab]

es geht nicht darum das es am ende so rauf und runter geht

OK, wollte mit meinem JSFiddle auch nur zeigen, wie sich mehrere .animate()-Instanzen für ein Objekt koppeln lassen. Die "Schleife" war just-for-fun