Wie du einen jQuery-animation zurück zum original-CSS-Eigenschaften

Gibt es viele sehr ähnliche Fragen hier, aber ich kann nicht finden, eine genaue Antwort auf meine Frage.

Ich bin neu in der Verwendung der jQuery - .animate() Methode und ich möchte wissen, ob es eine gängige oder beste Methode der Umkehrung der animation?

Hier ist ein Turnschuh ein Beispiel für das, was ich mir ausgedacht habe:
Fiddle

Im wesentlichen alle es tut, ist, verwenden Sie eine if-Anweisung zu prüfen, eine CSS-Eigenschaft und dann animieren Sie ihn mit einem Staat oder zurück zu den anderen Staat.

JS:

$(document).ready(function () {
    $("[name=toggle]").on("click", function () {
        if ($('.box').width() < 125) {
            $(".box").animate({
                opacity: .3,
                width: "125px",
                height: "125px"
            }, 250);
        } else {
            $(".box").animate({
                opacity: 1,
                width: "100px",
                height: "100px"
            }, 250)
        }
    });
});

CSS:

.box {
    background-color: lightblue;
    box-shadow: 5px 5px 10px #000000;
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 25px;
}
[name="toggle"] {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button name="toggle">Animate</button>
<div class="box"></div>

Dies ist, was ich war in der Lage zu kommen mit meiner ersten Exposition .animieren(), aber ich glaube, es gibt einen besseren Weg.
Sagen Sie, dass Sie wollen, um eine animation zu schweben, und Umgekehrt die animation, wenn die Maus bewegt wird von dem element. Gibt es einen Weg, um leicht umkehren der jQuery-animation leicht? Ich bin Weg, ich könnte mit einem :hover-Zustand mit CSS, aber das ist eine hypothetische Frage bezüglich jQuery .animieren().

Soweit ich weiß, gibt es nicht eine reverse Funktion mit animate(), ich benutze VelocityJS viel mehr, obwohl (es hat reverse Unterstützung), lohnt sich
Sieht sehr cool aus, werde ich anfangen zu spielen mit ihm um,
$(".yourelem").removeAttr("style");
Es gibt wahrscheinlich nicht eine bessere Weise. Plain .css() können Sie übergeben Sie eine leere Zeichenfolge ('') zum löschen der in der Regel aus dem element (also das zurücksetzen der stylesheet), aber das scheint nicht zu funktionieren mit .animate()

InformationsquelleAutor jmancherje | 2015-11-05

Können Sie dies mit einfachen CSS-übergänge.

CSS:

.animate-me {
    background-color:red;
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    left:150px;
    transition:left 2s, background-color 2s;
  
}  
.animate-me:hover{
  left:0;
  background-color:blue;
}

HTML:

<div class="animate-me"></div>

In der Regel css ist einfacher. Jedoch, wenn Browser sind alte jquery möglicherweise Ihre einzige Weg, so habe ich noch die JQuery-Weg.

JS:

function animationForward(){
  $(".animate-me").animate(
  {
    opacity: 0.25,
    left: "100",
    height: "100"
  }, 5000, function() {
    animationBackward();
  }
)}
function animationBackward(){
  $(".animate-me").animate(
  {
    opacity: 1,
    left: "50",
    height: "50"
  }, 5000, function() {
    animationForward();
  }
)}
animationForward();

CSS:

.animate-me {
  width:50px;
  height:50px;
  background-color:red;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animate-me"></div>

Danke! das ist wirklich cool und ich werde auf jeden Fall spielen, um mit CSS-übergängen, aber ich würde noch gerne wissen, tun dies mit jQuery
Habe ich eine JQuery Art und Weise sowie die Funktion wird aufgerufen, wenn die animation abgeschlossen ist 🙂

InformationsquelleAutor Olavi Sau

Dies ist wohl der kürzeste Weg, die ich denken kann :

JS:

$(function() {

var small = true;

$('[name=toggle]').click(function() {

  small = !small;

  if (small) var properties = {opacity: 1, width: 100, height: 100};
  else properties = {opacity: .3, width: 125, height: 125};

  $('.box').stop().animate(properties, 250);
});
});

CSS:

.box {
  background-color: lightblue;
  box-shadow: 5px 5px 10px #000000;
  width: 100px;
  height: 100px;
  display: block;
  margin: 20px auto 0 auto;
  border-radius: 25px;
}

[name="toggle"] {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="toggle">Animate</button>
<div class="box"></div>

Beachten Sie, dass es eine gute Idee, fügen Sie ein .stop() zur animation. Es wird nicht unterbrochen werden, sonst startet aber häufen sich die Klicks (animation queue buildup) statt. Mehr fällt mit längeren Laufzeiten verbunden.

Hier ist man mit hover-Aktion :

JS:

$(function() {

$('[name=toggle]').on('mouseenter mouseleave', function(e) {

  if (e.type == 'mouseenter') var properties = {opacity: .3, width: 125, height: 125};
  else properties = {opacity: 1, width: 100, height: 100};

  $('.box').stop().animate(properties, 250);
});
});

CSS:

.box {
  background-color: lightblue;
  box-shadow: 5px 5px 10px #000000;
  width: 100px;
  height: 100px;
  display: block;
  margin: 20px auto 0 auto;
  border-radius: 25px;
}

[name="toggle"] {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="toggle">Animate</button>
<div class="box"></div>

InformationsquelleAutor Shikkediel

Ich würde kombinieren CSS-übergänge und mittels jQuery-toggle-Klassen, wie folgt:

JSFiddle

$(document).ready(function () {
    $("[name=toggle]").on("click", function () {
        $(".box").toggleClass("differentSizeBox");
    });
});

CSS:

.box {
    background-color: lightblue;
    box-shadow: 5px 5px 10px #000000;
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 25px;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    -o-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}
.differentSizeBox {
    opacity: .3;
    width: 125px;
    height: 125px;
}
[name="toggle"] {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

Diese Weise können Sie immer noch die Kontrolle über die änderung mit einer Schaltfläche (oder einer anderen JS-events).

=====

EDIT: Die einzige Möglichkeit die ich mir vorstellen könnte, um "reverse" - nur mit JS-änderungen zu "erinnern", die CSS-Eigenschaften Sie ändern... und dann wieder zurück. Das wäre gut, dass, wenn Ihre ursprüngliche .box css-änderungen, wäre es immer noch Arbeit ohne änderung der JS

JSFiddle

$(document).ready(function () {
    $boxes = $(".box");
    var boxCss = {
        opacity: $boxes.css("opacity"),
        width: $boxes.css("width"),
        height: $boxes.css("height")
    };
    $("[name=toggle]").on("click", function () {
        if ($boxes.hasClass("changed")) {
            $boxes.animate(boxCss, 250);
            $boxes.removeClass("changed");
        } else {
            $boxes.animate({
                opacity: .3,
                width: "125px",
                height: "125px"
            }, 250);
            $boxes.addClass("changed");
        }
    });
});

======

HINWEIS: jQueryUI hat eine toggleClass() enthält Animationen.

InformationsquelleAutor Dallas

0

Einer sehr naiven Lösung, die ich vor kurzem benutzt, ist, um alle Werte für die animierten Eigenschaften mit jQuery.fn.css(arrayOfPropertyNames) und cache Sie mit jQuery.fn.data. Dann einfach später erneut nutzen, um wieder die animation.

$.fn.etamina = function(values) { var keys = Object.keys(values) var args = arguments return this.each(function() { var $this = $(this) $.extend(values, $this.data('etamina')) $this.data('etamina', $this.css(keys)) $.fn.animate.apply($this, args) }) }

Es nimmt die gleichen Argumente wie jQuery.fn.animieren.

Genannt, das erste mal: es speichert die ursprünglichen Werte und animiert das element mit der übergebenen properties.

Zweiten mal genannt: es speichert die animierten Werte und animiert das element, um die gespeicherten ursprünglichen Werte

~~https://jsfiddle.net/jat8wdky/~~

Update

Könnte man verrückt werden, und überschreiben Sie die original - jQuery.fn.animate zum Zwischenspeichern der Werte:
```
var $animate = $.fn.animate
$.fn.animate = function(prop, speed, easing, callback) {
  if (!this.data('etamina')) {
    this.data('etamina', this.css(Object.keys(prop)))
  }
  return $animate.call(this, prop, speed, easing, callback)
}

$.fn.etamina = function(speed, easing, callback) {
  var prop = this.data('etamina')
  if (prop == null) {
    return this
  }
  this.data('etamina', null)
  return $animate.call(this, prop, speed, easing, callback)
}
```
Animieren, wie gewohnt mit $(selector).animate wird, wieder mit $(selector).etamina.
```
//Animate
$('.foo').animate({
  top: '50%',
  left: '50%',
  width: '4em',
  height: '4em',
  marginTop: '-2em',
  marginLeft: '-2em',
  borderRadius: '50%'
})

//Revert
$('.foo').etamina()
```
https://fiddle.jshell.net/mk5zc1oh/

Beachten Sie, dass jQuery.css zurück nicht das eigentliche element offset und Größe, nur die berechnete styles.
- Dies ist die EINZIGE Lösung, die für mich gearbeitet, da meine original-Koordinaten wurden erstellt mit calc() und ich kann nicht animieren() ein css calc () - Koordinate (jQuery nicht erkennt das), sondern darum, es zu gehen zurück zu den ursprünglichen Koordinaten sollte eine Funktion sein, die native jQuery! Wir brauchen diese portiert upstream!
InformationsquelleAutor yckart

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.