如何将jQuery动画恢复为原始CSS属性

Question

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

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

这里是我所想出的一个例子的小提琴： Fiddle

本质上它是所有使用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，但这是一个关于jQuery .animate（）的假设问题。

Answer 1

你可以用普通的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>

Answer 2

我将结合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()。

Answer 3

这可能是我能想到的最简单的办法：

$(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>

Answer 4

很天真的解决方案，我最近使用过的，是获得了动画属性的值都与jQuery.fn.css(arrayOfPropertyNames)与jQuery.fn.data缓存。然后，稍后再使用它们来恢复动画。

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

它采用相同的参数jQuery.fn.animate。

• 第一次调用：它存储原始值并将元素动画化为通过的properties。

• 称为第二次：它存储动画值和动画元素添加到存储的原始值

https://jsfiddle.net/jat8wdky/

更新

你可以去疯狂和覆盖原始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不返回实际的元素偏移和大小，只是计算样式。