анимировать значение в css/классе

Question

//startling class of object 
.c1 { width: 100px; } 

//object gets animated 
$(".c1").animate({width: 200},500); 

//I wanna animate the object back to the initial width 
//without animate I would do 
$(".c1").css("width", ""); 
//to clear the inline style 

Как это можно сделать без работы?

---

Моя работа вокруг будет очистить inlinestyle, прочитать ширину, установите inlinestyle снова и анимировать. Как это:

$this = $(".c1"); 
var tempwidth=$this.width(); 
$this.css("width", ""); 
var targetwidth=$this.width(); 
$this.css("width", tempwidth); 
$this.animate({width: targetwidth},1000); 

Answer 1

$(document).ready(function(){ 
    var realwidth = parseInt($('.c').width()); 

    $('.c').animate({width: 200},1000); 
    $('.c').click(function(){ 
     $(this).animate({width: realwidth},1000); 
    }); 
}); 

DEMO with click одушевленного OnLoad и нажмите DIV анимировать назад

---

и если вы не хотите событие щелчка просто использовать этот

$(document).ready(function(){ 
    var realwidth = parseInt($('.c').width()); 
    $('.c').animate({width: 200},1000).animate({width: realwidth},1000); 
}); 

DEMO without click

Answer 2

Это можно сделать, сохранив исходное значение css для хранения данных элемента (используя метод jQuery .data()). Позже, например, сравните текущее значение с начальным значением для переключения элемента, FIDDLE.

// set the initial value 
$('.c1').each(function() { 
    $(this).data('width', $(this).width()); 
}); 

// animate element 
$(".c1").animate({ width: 200 }, 500); 

// animate element back to initial value 
var width = $(".c1").data('width'); 
$(".c1").animate({ width: width }, 500);