如何将 jQuery 动画反转回原始 CSS 属性

How to reverse a jQuery animation back to original CSS properties

本文关键字：原始 CSS 属性 jQuery 动画      更新时间：2023-09-26

这里有很多非常相似的问题，但我找不到我的问题的确切答案。

我是使用 jQuery .animate() 方法的新手，我想知道是否有一种常见或最佳方法来反转动画？

以下是我想出的一个例子的小提琴：小提琴

基本上，它所做的只是使用 if 语句来检查一个 CSS 属性，然后将其动画化为一种状态或返回到另一种状态。

$(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)
        }
    });
});
.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;
}
<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>

这是我第一次接触 .animate(( 时能够想到的，但我认为可能有更好的方法。假设您希望在悬停时制作动画，并在鼠标移离元素时反转动画。有没有办法轻松轻松反转jQuery动画？我不在，我可以在CSS中使用：hover状态，但这是一个关于jQuery .animate((的假设问题。

您可以使用过渡使用纯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;
}
<div class="animate-me"></div>

通常css更简单。但是，当浏览器很旧时，jquery可能是您唯一的方法，因此我包含了JQuery方法。

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();
.animate-me {
  width:50px;
  height:50px;
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-me"></div>

这可能是我能想到的最短方法：

$(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);
});
});
.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;
}
<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>

请注意，最好向动画添加.stop()。否则它不会被中断，而是会开始积累点击(动画队列堆积(。持续时间越长越明显。

这是一个带有悬停动作的：

$(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);
});
});
.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;
}
<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>

我会结合CSS过渡和使用jQuery来切换类，如下所示：

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;
}

这样，您仍然可以通过单击按钮(或其他 JS 事件(来控制更改。

===

==

编辑：我能想到的仅通过JS更改"反转"的唯一方法是"记住"您正在更改的CSS属性...然后恢复到那个。这很好，因为如果您的原始.box css 发生变化，它仍然可以在不更改 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");
        }
    });
});
===

===

注意：jQueryUI 有一个包含动画的 toggleClass((。

您可以发疯并覆盖原始jQuery.fn.animate以缓存值：

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)
}

像往常一样用$(selector).animate做动画，用$(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/

请注意，jQuery.css不会返回实际的元素偏移量和大小，只会返回计算的样式。

相关文章：