如何將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不返回實際的元素偏移和大小，只是計算樣式。